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中采用先前的值

2 个答案: