如何從表單輸入動態設置狀態

Question

我有2個React父/子組件。 子組件具有一個將+1添加到父組件的先前狀態的按鈕，以及一個為onChange事件觸發handleChange函數的窗體。

問題從“表單”輸入中，我想觸發一個將“狀態”設置為先前狀態的函數，再加上“表單”中的輸入。

例如，如果我在輸入中輸入50並點擊“提交”，則我希望新狀態為100

這是一個codeandbox： 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，您可以在這里查看 。