Javascript 如何在react中保存“选择选项”字段和复选框的值？

我有复选框和选择选项字段，但这些值不保存。代码如下：

复选框：

<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>

女性

---

顺便说一句，我目前正在本地存储中保存它们。

这样您就可以创建一些状态变量，然后在调用handleChange（）方法时，使用setState（）设置这些变量的状态，然后当您想使用ajax调用将它们发送到后端时，可以使用这个.state.variable\u名称发送

---

希望这有帮助。

对于复选框，您设置了一个checked属性和一个

handleChange

函数，因此无论函数返回什么，您的复选框都将始终处于

选中状态

或

未选中状态

，具体取决于道具，单选按钮也是如此。改为使用

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}));
}

十一年级
组件willmount（）{
this.setState（{gradeeleven:{this.props.gradeeleven==='gradeeleven'）？true:false}）
}
手变（e）{
this.setState（（prevState）=>（{gradeeleven:！prevState.gradeeleven}））；
}

对于select函数，在select（选择）字段而不是options（选项）字段上进行have和onChange

<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)
  }

位置
校长
副校长
老师
登记员
管理员
手变（e）{
console.log（例如target.value）
}