如何从 React JS UI 向节点 js 服务提交输入

Question

我有关于反应 js 的一般性问题。我对反应很陌生。react 中的一般方法是为输入控件创建一个状态对象，并在提交之前将其状态值分配给该输入。当我们在页面上有 2-5 个控件时，这将正常工作。我在页面上有 20 种不同类型的输入，例如文本框、下拉菜单、日历和单选按钮。我需要在状态对象中创建 20 个属性吗？我是否需要为控件编写 20 种不同类型的 onChange 函数？这将使我的代码太长。

Answer 1

受控输入

您正在处理受控输入。如果您不需要保持状态，您可以使用不受控制的输入来实现相同 的效果（在底部，您会找到一个可以帮助您解决此问题的链接）。

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

重要提示：请注意 state 属性与输入名称匹配。

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>

    );

  }

}

然后，您可以简单地添加更多这些类型之一的输入，仔细匹配输入name到类状态 `property.

您可以在此代码框中找到一个工作示例：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#control-components