onChange 或 onKeyUp 事件采用 ReactJS 中的先前值

Question

我在 ReactJS 中创建了表单。我正在 {key : value} 配对中使用常用方法获取值。但我在方法中得到了以前的值。

constructor(props) {
        super(props);
        {
            this.state = { name: "", age: 0 };
        }
    }

    inputChange = (key, value) => {
        this.setState({ [key] : value });
        console.log(this.state);
    }

    render() {
        return (
            <form>
                <div>
                    Name : <input type="text" name="name" onKeyUp={(e) => this.inputChange('name', e.target.value)}></input>
                </div>
                <div>
                    Age : <input type="text" name="age" onKeyUp={(e) => this.inputChange('age', e.target.value)}></input>
                </div>
            </form>
        )
    }

为了更好地理解，我附上了屏幕截图。

Answer 1

setState 将状态更改加入队列，但不会立即发生。如果你需要在状态改变后做一些事情，你可以将第二个回调参数传递给 setState:

inputChange = (key, value) => {
  this.setState({ [key] : value }, () => {
    console.log(this.state);
  });
}

Answer 2

这将完全满足您的需求。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      name: '',
      age: ''
    }
  }

  handleInput(option, event){
      if (option === 'name') {
       this.setState({
            name: event.target.value
        }, () => {
          console.log("Name: ", this.state.name)
        });
      }
      else if (option === 'age'){
        this.setState({
            age: event.target.value
        }, () => {
          console.log("Age: ", this.state.age)
        });
      }
  }

  render() {
        return (
          <div>
            <div>
              <header>Name: </header>
              <input type="text" onChange={this.handleInput.bind(this, 'name')}/>
              <header>Age: </header>
              <input type="text" onChange={this.handleInput.bind(this, 'age')}/>
            </div>
          </div>
        );
      }
    }

onChange 或 onKeyUp 事件采用 ReactJS 中的先前值

onChange or onKeyUp event takes previous value in ReactJS

reactjs