[英]React: 2 way binding props
如何对父组件 (Form.js) 中的变量进行 2 路绑定,以便子组件 (InputText.js) 中发生的更改将在父组件中更新?
预期结果:在InputText.js
中input
值将更新 Form.js 的Form.js
在 Form.js 中
render() {
return (
<div>
<InputText
title="Email"
data={this.state.formInputs.email}
/>
<div>
Value: {this.state.formInputs.email} // <-- this no change
</div>
</div>
)
}
在 InputText.js 中
export default class InputText extends React.Component {
constructor(props) {
super(props);
this.state = props;
this.handleKeyChange = this.keyUpHandler.bind(this);
}
keyUpHandler(e) {
this.setState({
data: e.target.value
});
}
render() {
return (
<div>
<label className="label">{this.state.title}</label>
<input type="text" value={this.state.data} onChange={this.handleKeyChange} /> // <-- type something here
value: ({this.state.data}) // <-- this changed
</div>
)
}
}
您需要将 state 提升到父级
父 class 看起来像
onChangeHandler(e) {
this.setState({
inputValue: e.target.value // you receive the value from the child to the parent here
})
}
render() {
return (
<div>
<InputText
title="Email"
onChange={this.onChangeHandler}
value={this.state.inputValue}
/>
<div>
Value: {this.state.inputValue}
</div>
</div>
)
}
儿童 class 看起来像
export default class InputText extends React.Component {
constructor(props) {
super(props);
this.state = props;
}
render() {
return (
<div>
<label className="label">{this.state.title}</label>
<input type="text" value={this.state.value} onChange={this.props.onChange} />
value: ({this.state.value})
</div>
)
}
}
您可以在父组件本身中管理 state 而不是像这样在子组件上管理它(将 state 向上提升):
在 Form.js 中
constructor(props) {
super(props);
this.handleKeyChange = this.keyUpHandler.bind(this);
}
keyUpHandler(e) {
const { formInputs } = this.state;
formInputs.email = e.target.value
this.setState({
formInputs: formInputs
});
}
render() {
// destructuring
const { email } = this.state.formInputs;
return (
<div>
<InputText
title="Email"
data={email}
changed={this.handleKeyChange}
/>
<div>
Value: {email}
</div>
</div>
)
}
在 InputText.js 中
export default class InputText extends React.Component {
render() {
// destructuring
const { title, data, changed } = this.props;
return (
<div>
<label className="label">{title}</label>
<input type="text" value={data} onChange={changed} />
value: ({data})
</div>
)
}
}
您还可以使 InputText.js 成为功能组件,而不是基于 class 的组件,因为它现在是无状态的。
更新:(如何重用处理程序方法)
您可以向 function 添加另一个参数,该参数将返回如下属性名称:
keyUpHandler(e, attribute) {
const { formInputs } = this.state;
formInputs[attribute] = e.target.value
this.setState({
formInputs: formInputs
});
}
从您那里您可以像这样发送它:
<input type="text" value={data} onChange={ (event) => changed(event, 'email') } />
这假设您对每个表单输入都有不同的输入,否则您可以将该属性名称也从props
中的父级传递给子级并相应地使用它。
您可以简单地将一个回调从 Form.js 传递给 InputText,然后在 InputText 中的 handleKeyChange 上调用该回调
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.