如何在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)
  }