我正在尝试学习React JS，并且正在从事个人项目。我陷入困境是因为我无法将子组件中输入字段的值传递给父组件的状态。
我尝试使用onChange事件，但由于某种原因，它正在调用的函数handleChange并未被触发。
这是父组件的片段：
class App extends Component {
state = {
myArray: [{ //myArray is being updated by another child component, which sets the values for id and amount; this works fine
id: 1,
amount: 12
},
{
id: 2,
amount: 23
}
]
total: 0 //expected value for total is 35
};
handleChange = e => {
const { name, value } = e.target
this.setState({
[name]: value
});
}
render() {
return (
<Child
handleChange={this.handleChange}
myArray={this.state.myArray} />
)
}
}
以下是Child组件的摘录：
class Child extends Component {
render() {
const { myArray, handleChange } = this.props;
const totalAmount = myArray.reduce(function (a, b) {
return a + b.amount;
}, 0);
return (
<div>
<label htmlFor="total"> Total Amount: </label>
<input id="total"
name="total"
type="number"
placeholder="0.00"
value={totalAmount}
onChange={e => handleChange(e)}
/>
</div>
)
}
}
总输入字段中的in值正确呈现。但是，我试图实现的是每次更改此输入字段的值时（当其他子组件更新myArray值，因此总和也更改时），我希望在父组件的状态下更新总值。
您不需要手动传递字段名称，您可以从事件中获取它。首先给您的输入一个名字
<input name="total" ...etc >
然后，您就可以在 handleChange
handleChange = e => {
const { name, value } = e.target
this.setState({
[name]: value
)}
}
您在“子组件”中的调用方式应为
onChange={handleChange}
在此处查看代码https://codesandbox.io/embed/unruffled-pascal-d5p2q?fontsize=14
为了获得更好的结构，最好将childComponent2放在childComponent1旁边。它只需要全部道具。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句