如何从表单输入动态设置状态

Question

我有 2 个 React 父/子组件。子组件有一个为父组件的先前状态添加 +1 的按钮，以及一个为onChange 事件触发handleChange 函数的表单。

问题 从表单输入中，我想触发一个函数，将状态设置为前一个状态，+表单中的输入。

例如，如果我在输入中输入 50 并点击提交，我希望新状态为 100

这是一个代码框：https://codesandbox.io/s/30mz2vvyo1

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 50
    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState((prevState) => {
      return { value: prevState.value + 1 }
    });
  }
  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
      <div>
        <Child value={this.state.value} handleChange={this.handleChange} handleSubmit={this.handleSubmit} />
     </div>
    )
  }
}


class Child extends React.Component {
  render() {
    return (
      <div>

        <button onClick={this.props.handleChange}>Count + 1</button>
        <div>{this.props.value}</div>

        <form onSubmit={this.props.handleSubmit}>
          <label>
            Name:
          <input type="text" onChange={this.props.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>

      </div>
    )
  }
}

Answer 1

您所面临的问题可以通过以下方式得到缓解；

1. 您需要在状态中有两个不同的变量。价值，可以保持你的价值。您还需要保存输入的当前值，我们称之为 inputNumber。
2. 您需要为您的按钮提供 onClick 功能。在所述函数中，按以下方式设置您的状态；

代码：

this.setState({
  value: this.state.value + this.state.inputNumber,
})

做完这些事情后，它应该可以按预期工作了。

我已经更新了你的codeandbox，你可以看看here。