我有两个具有父子关系的简单react组件。子类包含一个带有onChange事件的输入和一个对父类setState的回调。当我运行它时,setState似乎在父组件中工作,但传递给子组件的props似乎没有更新。什么好主意吗?下面是一个代码片段:
var FooInput = React.createClass({
handleInputChange: function(e) {
this.props.onInputChange(e.target.name, e.target.value);
},
render: function() {
return (
<div>
<input name="foo" value={this.props.foo} onChange={this.handleInputChange} />
</div>
)
}
})
var FooApp = React.createClass({
getInitialState: function() {
return {
foo: 'bar',
};
},
handleInputChange: function(key, value) {
this.setState({key: value});
},
render: function() {
return (
<div>
<FooInput
foo={this.state.foo}
onInputChange={this.handleInputChange} />
</div>
);
}
});
在上面的例子中,FooInput
子组件中的输入值保持为"bar",尽管handleInputChange
是在FooApp
父组件中触发的,并且foo是通过this.props
传递给子组件的。为什么输入值没有改变以反映新的状态?
实际上是通过执行this.setState({key: value})
来设置一个名为key
的状态变量。如果需要一个变量键,可以使用括号:
handleInputChange: function(key, value) {
this.setState({[key]: value});
}
或者创建一个新对象。
handleInputChange: function(key, value) {
const newState = {};
newState[key] = value;
this.setState(newState);
}