2 回答

TA貢獻1815條經驗 獲得超6個贊
如果要使用子項上的值更新父項的狀態,則必須將事件處理程序從父項傳遞到子項。如果要解析子項與其父項之間的通信,只需使用兩個參數傳遞和事件處理程序:字段名稱及其值。使用js,您可以使用點表示法和括號表示法調用字段。在這種情況下,您必須使用括號表示法,并將第一個參數作為參數傳遞,并作為值來存儲第二個參數。
一些代碼:
在應用組件中,渲染如下所示:
render() {
return (
<div className="App">
<Child data={this.state.object} clicked={this.updateValue} />
</div>
);
事件處理程序如下所示:
updateValue = (field, value) => {
let update = {};
update[field] = value;
this.setState({
...this.state,
object: {
...this.state.object,
update
}
});
};
這是什么意思?該方法要做的第一件事是創建一個包含更新的對象更新,然后它執行淺層復制,最后,更新對象將其與更新合并。
子組件中每個 Form.控件的代碼如下所示:
<Form.Control
size="sm"
type="text"
defaultValue={this.props.data.data1}
onChange={(event) => this.props.clicked('data1', event.target.value)}
/>

TA貢獻1824條經驗 獲得超5個贊
您可以根據變量設置 Form 組件的名稱,并在事件處理程序中使用它,如下所示:
<Form.Control
name="data1"
size="sm"
type="text"
defaultValue={this.props.data.data1}
onChange={this.props.handleOnChange}
/>
處理程序類似于:
handleOnChange = (e) => {
this.setState({object: {...this.state.object, [e.target.name]: e.target.value}})
}
<Child data={this.state.object} handleOnChange={this.handleOnChange} />
添加回答
舉報