Question

考虑以下代码块：

class FormInputComponent extends React.Component {
  render() {
    return (<input type="text" value={this.props.valueHandler} onChange={this.props.changeHandler} />);
  }
}

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rate: 50,
      inputOne: 0,
      inputTwo: 0
    }
  }

  changeHandler(key) {
    switch(key) {
      case "ONE":
        this.setState({
          inputOne: event.target.value
        });
        break;
      case "TWO":
        this.setState({
          inputTwo: event.target.value
        });
        break;
    }
  }

  getValue(key) {
    switch(key) {
      case "ONE":
        return this.state.inputOne;
        break;
      case "TWO":
        return this.state.inputTwo;
        break;
    }
  }
  render() {
    return (
      <div>
       <FormInputComponent valueHandler={this.getValue("ONE")} changeHandler={this.changeHandler.bind(this, "ONE")} />
        <br />
       <FormInputComponent valueHandler={this.getValue("TWO")} changeHandler={this.changeHandler.bind(this, "TWO")}/>
     </div>);
  }
}

ReactDOM.render(<MyApp />, document.body);

目前，两个输入字段组件从相应字段（Controlled）中的任何用户键获取其值。这是我想要的功能：

当用户在第一个输入字段中输入一个值（例如30）时，第二个输入字段应立即更新为30 * this.state.rate，即第二个字段应显示1500.

接下来，如果用户在第二个输入字段中键入值，或者甚至对其进行编辑，则第一个输入字段应显示计算结果值（val / this.state.rate）。因此，如果某人在第二个字段中键入3500，则结果值（3500/50）应显示在第一个输入字段中。

这可以通过计算结果值并将它们存储在两个状态变量中来实现。在这种情况下，两个表单字段组件可以简单地输出状态变量的值。

根据React docs，计算值不应理想地存储在状态中，而应在render方法中进行计算。但是，在这种情况下，如何在不将状态存储在状态??

的情况下实现结果

以上是代码的JSBIN链接：https://jsbin.com/poxuqe/edit?js,console,output

Answer 1

你可以试试这个：

class MyApp extends React.Component {

    changeHandler(key) {
      switch(key) {
         case "ONE":
           this.setState({
             inputOne: event.target.value,
             inputTwo: null
           });
           break;
      case "TWO":
         this.setState({
          inputOne:null,
          inputTwo: event.target.value
        });
          break;
    }
 }

  render() {
       let x = this.state.inputOne , y = this.state.inputTwo;
       if (x != null){
           y = x * this.state.rate;
       }
       if (y != null){
          x = y / this.state.rate;
       }

   return (
  <div>
   <FormInputComponent 
             valueHandler={x} 
             changeHandler={this.changeHandler.bind(this, "ONE")} />
    <br />
   <FormInputComponent 
      valueHandler={y} 
      changeHandler={this.changeHandler.bind(this, "TWO")} />
 </div>);

} }

Answer 2

您需要的是为每次更改更新两个输入的状态。请参阅更新的JSBin。

https://jsbin.com/mobutetazo/1/edit?js,console,output

为了简洁（而不是应用心灵），我只是克隆了第二个状态的值，你可以在分配之前很好地修改它。

Answer 3

您只需选择要存储的值之一（例如inputOne），然后在inputTwo（changeHandler之前）和{setState之前计算getValue的值{1}}（在返回之前）。

请参阅此JSBin：https://jsbin.com/jozokufuca/1/edit?js,console,output

要点：

changeHandler(key) {
    switch(key) {
      case "ONE":
        this.setState({
          inputOne: event.target.value
        });
        break;
      case "TWO":
        this.setState({
          inputOne: event.target.value / this.state.rate
        });
        break;
    }
}

getValue(key) {
    switch(key) {
      case "ONE":
        return this.state.inputOne;
        break;
      case "TWO":
        return this.state.inputOne * this.state.rate;
        break;
    }
}

使用React相互更新输入字段

3 个答案: