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调用将它们发送到你的后端时你可以使用this.state.variable_name发送。

希望这有帮助。

Answer 2

如果是复选框，则会设置已选中的属性以及handleChange功能，因此无论函数返回什么，您的复选框始终为checked或unchecked，具体取决于道具，单选按钮也是如此。请改用defaultChecked，然后使用状态

设置checked属性

你应该像

一样处理它

<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，而不是选项字段

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

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

2 个答案: