阵营 - 让输入

Question

我与两个输入的反应形式：

<input type="name" className="form-control" placeholder="Name"/> 
<input type="description" className="form-control" placeholder="Description"/> 

由于类型输入字段分别为name和description， 我假定上表单提交的字段this.state.name和this.state.description将更新。

但是，当我提交表单时，这些字段不会更改它们的值。

的形式完整的代码是：

<form> 
       <div className="form-group"> 
        <label>Name</label> 
        <input type="name" className="form-control" placeholder="Name"/> 
       </div> 
       <div className="form-group"> 
        <label>Description</label> 
        <input type="description" className="form-control" placeholder="Description"/> 
       </div> 

       <button type="submit" onClick={this.handleSubmit} className="btn btn-default">Submit</button> 
      </form> 

如何我可以得到由用户填写的值？

Answer 1

有几种方法，你如何从形式获取值，其中之一就可以使用refs这样

<input ref="name" type="name" className="form-control" placeholder="Name"/> 
<input ref="description" type="description" className="form-control" placeholder="Description"/> 

var name = ReactDOM.findDOMNode(this.refs.name).value, 
    description = ReactDOM.findDOMNode(this.refs.description).value; 

Example

注意举例>= 0.14React的版本，其中有react-dom。对于<= 0.13版本，而不是ReactDOM使用React

您也可以使用states这样

<input onChange={this.updateName} type="name" className="form-control" placeholder="Name"/> 
<input onChange={this.updateDescription} type="description" className="form-control" placeholder="Description"/> 

handleSubmit: function (e) { 
    e.preventDefault(); 

    var name = this.state.name; 
     description = this.state.description; 
}, 

getInitialState: function() { 
    return { name: '', description: '' }; 
}, 

updateName: function (e) { 
    this.setState({ name: e.target.value });  
}, 

updateDescription: function (e) { 
    this.setState({ description: e.target.value }); 
} 

Example

Answer 2

你应该做的原始文件说，这里https://facebook.github.io/react/docs/forms.html#controlled-components

我已经修改了代码在文档中示例以适合您的案例。我知道这可以做得更有活力，但为了简单起见，我已经这样做了。

 getInitialState: function() { 
     return { 
      valueName: 'Name', 
      valueDesc: 'Description' 
     }; 
     }, 
     // here you handle all the changes in the input 
     handleNameChange: function(event) { 
     this.setState({valueName: event.target.value}); 
     }, 
     handleDescChange: function(event) { 
     this.setState({valueDesc: event.target.value}); 
     }, 
     render: function() { 
     return (<div> 
        <input type="name" value={this.state.valueName} onChange={this.handleChange} /> 
        <input type="description" value={this.state.valueDesc} onChange={this.handleChange} /> 
       </div>); 
     }