Question

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

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

例如，如果我在输入中写入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

您面临的问题可以减轻;

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

代码：

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

执行这些操作后，它应该按预期工作。

我已更新您的代码框，您可以查看它here。

如何从Form输入动态设置State

1 个答案: