javascript - react : 2 way binding props

Question

我怎样才能对父组件 (Form.js) 中的变量进行双向绑定(bind)，以便子组件 (InputText.js) 中发生的更改将在父组件中更新？

预期结果:在 InputText.js 的 input 中键入值将更新 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>
    )
  }
}

Answer 1

您可以在父组件本身管理状态，而不是像这样在子组件上管理状态(lifting state up):

在 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 设为功能组件，而不是基于类的组件，因为它现在是无状态的。

更新:(如何重用处理程序方法)

您可以向函数添加另一个参数，它会像这样返回属性名称:

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 中的父级传递给子级并相应地使用它。