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

Question

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

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

Answer 1

受控输入您正在处理受控输入。如果您不需要保持状态，您可以使用不受控制的输入来实现相同 的效果（在底部，您会找到一个可以帮助您解决此问题的链接）。要处理您需要的输入，可以执行以下操作：重要提示：请注意 state 属性与输入名称匹配。class App extends React.Component {&nbsp; state = {&nbsp; &nbsp; text: "",&nbsp; &nbsp; checkbox: false,&nbsp; &nbsp; dropdown: "",&nbsp; &nbsp; date: "",&nbsp; &nbsp; radio: ""&nbsp; };&nbsp; handleTextChange = event => {&nbsp; &nbsp; const { name, value } = event.target;&nbsp; &nbsp; this.setState({ [name]: value });&nbsp; };&nbsp; handleCheckboxChange = event => {&nbsp; &nbsp; const { name } = event.target;&nbsp; &nbsp; this.setState(previousState => ({ [name]: !previousState[name] }));&nbsp; };&nbsp; handleDropdownChange = event => {&nbsp; &nbsp; const { name, value } = event.target;&nbsp; &nbsp; this.setState({ [name]: value });&nbsp; };&nbsp; handleDateChange = event => {&nbsp; &nbsp; const { name, value } = event.target;&nbsp; &nbsp; this.setState({ [name]: value });&nbsp; };&nbsp; handleRadioChange = event => {&nbsp; &nbsp; const { name, value } = event.target;&nbsp; &nbsp; this.setState({ [name]: value });&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <p>Text</p>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleTextChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.text}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <p>Checkbox</p>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleCheckboxChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.checkbox}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <p>Dropdown</p>&nbsp; &nbsp; &nbsp; &nbsp; <select&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="dropdown"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.dropdown}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleDropdownChange}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option name="option1">Option 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option name="option2">Option 2</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <p>Date</p>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="date"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="date"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleDateChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.date}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <p>Radio</p>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleRadioChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="option1"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <label for="option1">Option 1</label>&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleRadioChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="option2"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <label for="option2">Option 2</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}然后，您可以简单地添加更多这些类型之一的输入，仔细匹配输入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