阵营 - 让输入
问题描述:
我与两个输入的反应形式:阵营 - 让输入
<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>
如何我可以得到由用户填写的值?
答
有几种方法,你如何从形式获取值,其中之一就可以使用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;
注意举例>= 0.14
React
的版本,其中有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 });
}
答
你应该做的原始文件说,这里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>);
}
有几种方法可以从窗体中获取值,其中一个使用像这样的参考https://jsfiddle.net/69z2wepo/18494/ –