Question

我的问题最好用一个代码示例来解释：

    <input type="text" value={this.state.a} onChange={this.setA} /> // inputA
    <input type="text" value={this.state.b} onChange={this.setB} /> // inputB

    setA(e) {
      this.setState({a: e.target.value});
    }

    setB(e) {
      this.setState({b: e.target.value});
      // at this point, the inputA.value changes due to state change
      setA(???) // update the state with inputA's new value
    }

我想将this.state.a设置为inputA内的新值，但是由于输入值会以编程方式更改，因此我必须手动调用setA()方法。问题在于，我甚至需要传递inputA才能获得新值。

Answer 1

因为您没有将值传递给输入

<input type="text" value={this.state.a} onChange={this.setA} />
<input type="text" value={this.state.b} onChange={this.setB} />

Answer 2

用onChange = {（）=> {this.setB}}替换onChange方法。它将起作用。

Answer 3

上面的问题显示了controlled个输入正在使用中。渲染中的所有内容均取决于state或props。没有确定的状态更新方式。在这种情况下，您依靠change事件来更新state A，而逻辑表明state a也依赖于state b。因此，您的setB函数应如下所示

 setB(e) {
  const b = e.target.value;
  let a = this.state.a; // gives your the current value of a, which is also present in the state

  // do calculations to determine your new A
  // Then set your state like below

   this.setState({b, a }); // Both your inputs would reflect the new values in the state
}

即使您没有在a中设置setB的值，input a也会保留其旧值。

通过以编程方式更改的输入来触发需要事件的onChange

3 个答案: