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} />
}

如果更新第一个input值，该值将保存为x状态值。这使rerender成为您的组件。

根据您的问题如何绑定3个输入值？

如果您需要通过一个函数绑定多个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)} />

Answer 2

在react中，您可以使用state并将状态var分配给y和z的值。

Answer 3

您可以使用 state ，它可以帮助您在需要时呈现ui

<table style="position: relative;" width="100%" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td style="background-color:#E5FFC8;border-top:#a6a6a6 1px solid;border-left:#a6a6a6 1px solid;border-right:#a6a6a6 1px solid;border-bottom:#a6a6a6 1px solid" width="75.68%" height="50px"></td>
            <td style="background-color:#FFC2C2;border-top:#a6a6a6 1px solid;border-right:#a6a6a6 1px solid;border-bottom:#a6a6a6 1px solid" width="15.03%"></td>
            <td style="background-color:#9EC6FF;border-top:#a6a6a6 1px solid;border-right:#a6a6a6 1px solid;border-bottom:#a6a6a6 1px solid" width="4.81%"></td>
            <td style="background-color:#FFFF99;border-top:#a6a6a6 1px solid;border-right:#a6a6a6 1px solid;border-bottom:#a6a6a6 1px solid" width="1.83%"></td>
            <td style="background-color:#FFCC99;border-top:#a6a6a6 1px solid;border-right:#a6a6a6 1px solid;border-bottom:#a6a6a6 1px solid" width="2.46%"></td>
            <td style="background-color:#FFC8EC;border-top:#a6a6a6 1px solid;border-right:#a6a6a6 1px solid;border-bottom:#a6a6a6 1px solid" width="0.19%"></td>
        </tr>
    </tbody>
</table>

或

<label>X</label>
   <input value={this.state.x} onChange={(input)=>this.setState(X:input)} />

<label>Y</label>
   <input value={this.state.y} onChange={(input)=>this.setState(y:input)} />

<label>Z</label>
   <input value={this.state.z} onChange={(input)=>this.setState(z:input)} />

然后使用像这样的onpress函数：

  constructor(props) {
    super(props);
        this.state = {
        y: 0,
        y: 0,
        z: 0,
    };
    this.onPress = this.onPress.bind(this);
  }

如何绑定3个输入值？

3 个答案: