如何在React中保存选择选项字段和复选框的值？

Question

我有复选框并选择选项字段，但是值未保存。 这是代码：

复选框：

<label>
  <input name='gradeeleven'
   value={'Grade Eleven'}
   type='checkbox'
   checked={props.gradeeleven === 'Grade Eleven'}
   onChange={handleChange}
   required
   />
   Grade Eleven
</label>

和选择选项字段：

<label>Position</label>

   <select>
     <option value={props['principal']} name='position' onChange={handleChange} key={1}>Principal</option>
     <option value={props['viceprincipal']} name='position' onChange={handleChange} key={2}>Vice Principal</option>
     <option value={props['teacher']} name='position' onChange={handleChange} key={3}>Teacher</option>
     <option value={props['registrar']} name='position' onChange={handleChange} key={4}>Registrar</option>
     <option value={props['administrator']} name='position' onChange={handleChange} key={5}>Administrator</option>
  </select>

我正在为单选按钮做类似的事情，它正在工作，但是我不明白为什么这些按钮不起作用。

这是我的单选按钮的示例：

<label>
   <input name='sex'
   value={'Female'}
   type='radio'
   checked={props.sex === 'Female'}
   key={2}
   onChange={handleChange}
   required
   />
   Female
</label>

顺便说一句，我目前正在将它们保存在localStorage中。

Answer 1

因此，您可以创建一些状态变量，然后在调用handleChange（）方法时，使用setState（）设置这些变量的状态，然后在您要使用ajax调用将其发送到后端时，可以使用此方法发送.state.variable_name。

希望这可以帮助。

Answer 2

对于复选框，您将设置一个选中的属性以及一个handleChange函数，因此无论该函数返回什么，您的复选框将始终根据属性进行checked或unchecked ，与单选按钮一样。 改用defaultChecked ，然后将checked属性设置为state

你应该像这样处理

<label>
  <input name='gradeeleven'
   value='Grade Eleven'
   type='checkbox'
   defaultChecked={props.gradeeleven === 'Grade Eleven'}
   checked={this.state.gradeeleven} 
   onChange={handleChange}
   required
   />
   Grade Eleven
</label>

甚至更好

<label>
  <input name='gradeeleven'
   value='Grade Eleven'
   type='checkbox'

   checked={this.state.gradeeleven} 
   onChange={handleChange}
   required
   />
   Grade Eleven
</label>


componentWillMount() {
    this.setState({gradeeleven: (this.props.gradeeleven === 'Grade Eleven')? true: false})
}
handleChange(e) {
     this.setState((prevState) => ({gradeeleven: !prevState.gradeeleven}));
}

对于select函数，在select上具有onChange，而不是options字段

<label>Position</label>

   <select onChange={handleChange}>
     <option value={props['principal']} name='position' key={1}>Principal</option>
     <option value={props['viceprincipal']} name='position' key={2}>Vice Principal</option>
     <option value={props['teacher']} name='position' key={3}>Teacher</option>
     <option value={props['registrar']} name='position' key={4}>Registrar</option>
     <option value={props['administrator']} name='position' key={5}>Administrator</option>
  </select>

 handleChange(e) {
      console.log(e.target.value)
  }