javascript - 如何从 React JS UI 向 Node JS 服务提交输入

Question

我有关于 React js 的一般问题。我对 react 很陌生。 React 中的一般方法是为输入控件创建一个状态对象，并在提交之前将其状态值分配给该输入。当页面上有 2-5 个控件时，这将工作得很好。

页面上有 20 种不同类型的输入，例如文本框、下拉菜单、日历和单选按钮。我需要在状态对象中创建 20 个属性吗？我需要为控件编写20种不同类型的onChange函数吗？这将使我的代码太长。

Answer 1

受控输入

您正在处理受控输入。如果您不需要保留状态，您可以使用不受控制的输入实现相同的效果(在底部您将找到一个可以帮助您完成此操作的链接)。

要处理您需要的输入，可以执行以下操作:

重要提示:请注意，状态属性与输入名称相匹配。

class App extends React.Component {
  state = {
    text: "",
    checkbox: false,
    dropdown: "",
    date: "",
    radio: ""
  };

  handleTextChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleCheckboxChange = event => {
    const { name } = event.target;
    this.setState(previousState => ({ [name]: !previousState[name] }));
  };

  handleDropdownChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleDateChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleRadioChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <div className="App">
        <p>Text</p>
        <input
          type="text"
          name="text"
          onChange={this.handleTextChange}
          value={this.state.text}
        />

        <p>Checkbox</p>
        <input
          type="checkbox"
          name="checkbox"
          onChange={this.handleCheckboxChange}
          value={this.state.checkbox}
        />

        <p>Dropdown</p>
        <select
          name="dropdown"
          value={this.state.dropdown}
          onChange={this.handleDropdownChange}
        >
          <option name="option1">Option 1</option>
          <option name="option2">Option 2</option>
        </select>

        <p>Date</p>
        <input
          type="date"
          name="date"
          onChange={this.handleDateChange}
          value={this.state.date}
        />

        <p>Radio</p>
        <input
          type="radio"
          name="radio"
          onChange={this.handleRadioChange}
          value="option1"
        />
        <label for="option1">Option 1</label>
        <br />

        <input
          type="radio"
          name="radio"
          onChange={this.handleRadioChange}
          value="option2"
        />
        <label for="option2">Option 2</label>
      </div>
    );
  }
}

然后，您可以简单地添加更多其中一种类型的输入，仔细地将输入名称与类状态“属性”匹配。

您可以在此代码和框中找到一个工作示例:https://codesandbox.io/s/controlled-inputs-jttq8

有关更详细的答案以及如何处理不受控制的表单，请参阅媒体上这篇很棒的文章:https://medium.com/@agoiabeladeyemi/the-complete-guide-to-forms-in-react-d2ba93f32825

来源:https://reactjs.org/docs/forms.html#controlled-components