如何從 React JS UI 向節點 js 服務提交輸入

Question

我有關於反應 js 的一般性問題。 我對反應很陌生。 反應中的一般方法是為輸入控件創建 state object 並在提交之前將其 state 值分配給該輸入。 當我們在頁面上有 2-5 個控件時，這將正常工作。

我在頁面上有 20 種不同類型的輸入，例如文本框、下拉菜單、日歷和單選按鈕。 我需要在 state object 中創建 20 個屬性嗎？ 我是否需要為控件編寫 20 種不同類型的 onChange function？ 這將使我的代碼太長。

Answer 1

受控輸入

您正在處理受控輸入。 如果您不需要保留 state（在底部您會找到一個可以幫助您解決此問題的鏈接），您可以使用不受控制的輸入來實現相同的效果。

要處理您需要的輸入，可以執行以下操作：

重要提示：請注意，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到 class state `屬性。

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

有關更詳細的答案以及如何處理不受控制的 forms，請參閱介質上的這篇精彩文章： https://medium.com/@agoiabeladeyemi/the-complete-guide-to-forms-in-react-d2ba93f32825

資料來源： https://reactjs.org/docs/forms.html#controlled-components