react 实现受控单选框&复选框

结论，radio 和 checkbox 通过操作 checked 实现受控，value 只起辅助作用。

费话不多说，直接上代码。

单选框

// html 部分
( <input type="radio" name="" id="" value="finish" 
checked={this.state.radioValue === 'finish'} 
onChange={this.handleChange} />
<input type="radio" name="" id="" value="unfinish" 
checked={this.state.radioValue === 'unfinish'} 
onChange={this.handleChange} /> )

// state
state = {
    radioValue: 'finish'
}

// change 事件
handleChange = (event) => {
    this.setState({
        radioValue: event.target.value
    });
};

复选框

// html 部分
( <input type="checkbox" name="" id="" value='吃饭'
checked={this.state.checkboxArr.indexOf('吃饭') >= 0 ? true : false}
onChange={this.handelChange.bind(this, '吃饭')} />
<input type="checkbox" name="" id="" value='睡觉'
checked={this.state.checkboxArr.indexOf('睡觉') >= 0 ? true : false}
onChange={this.handelChange.bind(this, '睡觉')} />
<input type="checkbox" name="" id="" value='打豆豆'
checked={this.state.checkboxArr.indexOf('打豆豆') >= 0 ? true : false}
onChange={this.handelChange.bind(this, '打豆豆')} /> )
// onChange 部分也可改为 onChange={handelChange}
// 相应的，change 事件函数内
// 就要使用 event.target.value 获取用户点击的选项(如上文的 radio 事件函数)

// state
state = {
    newCheckboxArr: ['吃饭', '睡觉']
}

// change 事件
handelChange = (value, event) => {
    let newCheckboxArr = [...this.state.checkboxArr]
    if (newCheckboxArr.indexOf(value) >= 0) {
        // 如果已被选中，则从数组中删除该选项
        newCheckboxArr.splice(newCheckboxArr.indexOf(value), 1)
    } else {
        // 如果为被选中，则添加
        newCheckboxArr.push(value);
    }
    // 更新 state
    this.setState({ checkboxArr: newCheckboxArr })
}

一些无意义的分析，不看也罢

react 中，input、select、textarea 都是通过操作 value，实现受控； 毕竟它们的 value 属性值，都直接或间接的展示在了视图上；

但是 radio 和 checkbox 在视图上所展示的，仅仅只有一个，是否处于选中状态的图标，这个状态只与 checked 属性有关，而与 value 值基本毫无关系；

因此，想要实现受控的 radio 和 checkbox，便只能在 checked 属性上下功夫了。