javascript - 如何绑定(bind)3个输入值？

Question

我有 3 个输入，需要在第一个输入中输入值，每次更改第一个输入中的值时，其他两个输入都会重新计算它们的值。X - 应由用户输入，y = X * X, z = X/2

<label>X</label>
   <input value={x} onChange={this.handleChange} />

<label>Y</label>
   <input value={y} onChange={this.handleChange} />

<label>Z</label>
   <input value={z} onChange={this.handleChange} />

Answer 1

欢迎来到React世界。您需要使用一个 state 值来保存 x 值。

state={
   x: 0,
}
handleChange = (e) => {
   this.setState({ x:  e.target.value});
}
...
render() {
const { x } = this.state;
...
<label>X</label>
   <input value={x} onChange={this.handleChange} />

<label>Y</label>
   <input value={x * x} readOnly} />

<label>Z</label>
   <input value={x / 2} readOnly} />
}

如果您更新第一个输入值，该值将保存在x状态值中。这使得重新渲染成为您的组件。

根据你的问题如何绑定(bind)3个输入值？，

如果您需要使用一个函数绑定(bind)多个input更改，您可以将唯一的Id传递给handleChange函数。

handleChange = (e, inputId) => {
   if (inputId === 0) {
      this.setState({ x: e.target.value });
   } else if(inputId === 1) {
      this.setState({ y: e.target.value });
   } else if(inputId === 2) {
      this.setState({ z: e.target.value });
   }

}
...
<input value={x} onChange={() => this.handleChange(0)} />
<input value={y} onChange={() => this.handleChange(1)} />
<input value={z} onChange={() => this.handleChange(2)} />