如何设置默认值checkboxREACT js
在使用React中的默认值checked =“checked”后，我很难更新checkbox的状态。
var rCheck = React.createElement('input',{type: 'checkbox', checked:'checked', value: true},'Check here'); 分配checked="checked" ，我不能通过单击来取消选中/检查来交互checkbox状态。
要进行交互，您需要更改checkbox的状态。 要有一个默认设置，你可以使用defaultChecked 。
一个例子：
<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />
如果仅使用React.createElement创buildcheckbox，则使用属性defaultChecked 。
React.createElement('input',{type: 'checkbox', defaultChecked: false});
感谢@nash_ag
有几种方法来完成这个，这里有一个：
写在ES6：
class Checkbox extends React.Component { constructor(props) { super(props); this.state = { isChecked: true, }; } toggleChange = () => { this.setState({ isChecked: !this.state.isChecked, }); } render() { return ( <label> <input type="checkbox" checked={this.state.isChecked} onChange={this.toggleChange} /> Check Me! </label> ); } } ReactDOM.render(<Checkbox />, document.getElementById('checkbox'));
这里是一个JSBin现场演示。
或者用简单的旧JavaScript：
var Checkbox = React.createClass({ getInitialState: function() { return { isChecked: true }; }, toggleChange: function() { this.setState({ isChecked: !this.state.isChecked // flip boolean value }, function() { console.log(this.state); }.bind(this)); }, render: function() { return ( <label> <input type="checkbox" checked={this.state.isChecked} onChange={this.toggleChange} /> Check Me! </label> ); } }); React.render(<Checkbox />, document.getElementById('checkbox'));
再次，在JSBin的现场演示。
除了正确的答案你可以做：P
<input name="remember" type="checkbox" defaultChecked/>
它的工作
<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />
和函数初始化它
{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}
这是我之前做的一个代码，它可能是有用的。 你必须玩这个行=> this.state = {checked：false，checked2：true};
class Componente extends React.Component { constructor(props) { super(props); this.state = { checked: false, checked2: true}; this.handleChange = this.handleChange.bind(this); this.handleChange2 = this.handleChange2.bind(this); } handleChange() { this.setState({ checked: !this.state.checked }) } handleChange2() { this.setState({ checked2: !this.state.checked2 }) } render() { const togglecheck1 = this.state.checked ? 'hidden-check1' : ''; const togglecheck2 = this.state.checked2 ? 'hidden-check2' : ''; return <div> <div> <label>Check 1</label> <input type="checkbox" id="chk1"className="chk11" checked={ this.state.checked } onChange={ this.handleChange } /> <label>Check 2</label> <input type="checkbox" id="chk2" className="chk22" checked={ this.state.checked2 } onChange={ this.handleChange2 } /> </div> <div className={ togglecheck1 }>show hide div with check 1</div> <div className={ togglecheck2 }>show hide div with check 2</div> </div>; } } ReactDOM.render( <Componente />, document.getElementById('container') );
CSS
.hidden-check1 { display: none; } .hidden-check2 { visibility: hidden; }
HTML
<div id="container"> <!-- This element's contents will be replaced with your component. --> </div>
这里是codepen => http://codepen.io/parlop/pen/EKmaWM
<div className="form-group"> <div className="checkbox"> <label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)} />Flagged</label> <br /> <label><input type="checkbox" value="" />Un Flagged</label> </div> </div
handleInputChange（事件）{
console.log("event",event.target.checked) }
上面的句柄在选中或不选中时给你真或假的值
