如何保存選擇字段選項的反應值和複選框？

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

在複選框的情況下，你是一個settig檢查屬性，也是一個handleChange功能，所以什麼都函數返回時，你的複選框，將永遠是取決於道具checked或unchecked，同樣是單選按鈕的情況。使用defaultChecked代替，然後設置檢查屬性與國家

你應該處理它像

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

的選擇功能有和的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) 
    }