Before, there was less input on the written page, so no single component was proposed. Today, I studied the input component, but shared an onChange problem card for a while. After checking, I found several better ways to share:
Method 1
Input component
let Input = React.createClass({ getInitialState: function() { return { } }, render: function() { return ( <div className="inputwrapper"> <input type="text" placeholder={this.props.placeholder} onChange={this.props.vauleChange.bind(null,this.props.name)}/> </div> ); } })
Using the Input component
let FormAdd = React.createClass({ getInitialState: function() { return { } }, submit:function(){ console.log(this.state); }, vauleChange:function(name,e){ console.log(name+e.target.value); this.setState({[name]: e.target.value}) }, render: function() { return ( <div className="all"> <Input placeholder="Please enter your name" name="name" vauleChange={this.vauleChange}></Input> <Input placeholder="Please input your mobile number" name="phone" vauleChange={this.vauleChange}> </Input> <Input placeholder="Please input your wechat" name="wechat" vauleChange={this.vauleChange}></Input> <Input placeholder="Please enter your QQ Number" name="qq" vauleChange={this.vauleChange}></Input> <div className="rebtn" onClick={this.submit}></div> </div> </div> ); } })
Method two
Input component
let Input = React.createClass({ getInitialState: function() { return { } }, render: function() { return ( <div className="inputwrapper"> <input type="text" placeholder={this.props.placeholder} name={this.props.name} onChange={this.props.vauleChange}/> </div> ); } })
Using the Input component
let FormAdd = React.createClass({ getInitialState: function() { return { } }, submit:function(){ console.log(this.state); }, vauleChange:function(name,e){ this.setState({[e.target.name]: e.target.value}); /*It's OK to do the following var change = {}; change[e.target.name] = e.target.value; this.setState(change); */ }, render: function() { return ( <div className="all"> <Input placeholder="Please enter your name" name="name" vauleChange={this.vauleChange}></Input> <Input placeholder="Please input your mobile number" name="phone" vauleChange={this.vauleChange}> </Input> <Input placeholder="Please input your wechat" name="wechat" vauleChange={this.vauleChange}></Input> <Input placeholder="Please enter your QQ Number" name="qq" vauleChange={this.vauleChange}></Input> <div className="rebtn" onClick={this.submit}></div> </div> ); } })
Note: the first parameter of setState({xxx:xxx}) will be considered as a string by default, because what is passed dynamically is a variable to be wrapped in [] brackets
Reference resources: React.js: Identifying different inputs with one onChange handler