React.js:使用一个onChange处理程序标识不同的输入
React.js:使用一个onChange处理程序标识不同的输入
提问于 2014-01-10 04:02:42
好奇什么是解决这个问题的正确方法：
var Hello = React.createClass({
getInitialState: function() {
return {total: 0, input1:0, input2:0};
},
render: function() {
return (
<div>{this.state.total}<br/>
<input type="text" value={this.state.input1} onChange={this.handleChange} />
<input type="text" value={this.state.input2} onChange={this.handleChange} />
</div>
);
},
handleChange: function(e){
this.setState({ ??? : e.target.value});
t = this.state.input1 + this.state.input2;
this.setState({total: t});
}
});
React.renderComponent(<Hello />, document.getElementById('content'));显然，您可以创建单独的handleChange函数来处理每个不同的输入，但这并不是很好。类似地，您可以只为单个输入创建一个组件，但我想看看是否有这样做的方法。
回答 10
Stack Overflow用户
回答已采纳
发布于 2014-01-10 05:43:55
我建议在input元素上使用标准的超文本标记语言属性，比如name来识别输入。此外，您不需要将"total“作为一个单独的值保存在state中，因为它可以通过在state中添加其他值来组合：
var Hello = React.createClass({
getInitialState: function() {
return {input1: 0, input2: 0};
},
render: function() {
const total = this.state.input1 + this.state.input2;
return (
<div>{total}<br/>
<input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} />
<input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} />
</div>
);
},
handleChange: function(e) {
this.setState({[e.target.name]: e.target.value});
}
});
React.renderComponent(<Hello />, document.getElementById('content'));Stack Overflow用户
发布于 2014-03-03 00:47:55
您可以使用.bind方法预先构建handleChange方法的参数。它应该是这样的：
var Hello = React.createClass({
getInitialState: function() {
return {input1:0,
input2:0};
},
render: function() {
var total = this.state.input1 + this.state.input2;
return (
<div>{total}<br/>
<input type="text" value={this.state.input1}
onChange={this.handleChange.bind(this, 'input1')} />
<input type="text" value={this.state.input2}
onChange={this.handleChange.bind(this, 'input2')} />
</div>
);
},
handleChange: function (name, e) {
var change = {};
change[name] = e.target.value;
this.setState(change);
}
});
React.renderComponent(<Hello />, document.getElementById('content'));(我还让total在渲染时计算，因为这是推荐的做法。)
Stack Overflow用户
发布于 2016-03-15 04:33:19
onChange事件气泡...所以你可以这样做：
// A sample form
render () {
<form onChange={setField}>
<input name="input1" />
<input name="input2" />
</form>
}您的setField方法可能如下所示(假设您使用的是ES2015或更高版本：
setField (e) {
this.setState({[e.target.name]: e.target.value})
}我在几个应用程序中使用了类似的东西，非常方便。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21029999
复制相关文章
相似问题