我有麻烦更新复选框的状态后,它被分配的默认值checked=“checked”在React。
var rCheck = React.createElement('input',
{
type: 'checkbox',
checked: 'checked',
value: true
}, 'Check here');
在分配checked="checked"后,我无法通过单击取消选中/选中来交互复选框状态。
我有麻烦更新复选框的状态后,它被分配的默认值checked=“checked”在React。
var rCheck = React.createElement('input',
{
type: 'checkbox',
checked: 'checked',
value: true
}, 'Check here');
在分配checked="checked"后,我无法通过单击取消选中/选中来交互复选框状态。
当前回答
你可以使用一个状态变量"enableSwitch"和一个函数"handleSwitch"来处理你默认的选中Switch:
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switchId" checked={this.state.enableSwitch} onClick={this.handleSwitch}/>
<label class="custom-control-label" for="switchId">switch text</label>
</div>
下面是一个函数,如果用户点击开关,它会反转变量:
handleSwitch = (e) => {
this.setState({ enableSwitch: !this.state.enableSwitch });
}
我知道这是对一个老问题的晚回复,但这个简短的解决方案可能会帮助其他用户。
其他回答
在React呈现生命周期中,表单元素上的value属性 将覆盖DOM中的值。对于一个不受控制的组件, 你通常希望React指定初始值,但留下 后续更新不受控制。要处理这种情况,您可以指定 使用defaultValue或defaultChecked属性代替value。
<input
type="checkbox"
defaultChecked={true}
/>
Or
React.createElement('input',{type: 'checkbox', defaultChecked: true});
请签出更多关于defaultChecked复选框的详细信息: https://reactjs.org/docs/uncontrolled-components.html#default-values
除了正确答案,你还可以这样做:P
<input name="remember" type="checkbox" defaultChecked/>
你可以使用一个状态变量"enableSwitch"和一个函数"handleSwitch"来处理你默认的选中Switch:
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switchId" checked={this.state.enableSwitch} onClick={this.handleSwitch}/>
<label class="custom-control-label" for="switchId">switch text</label>
</div>
下面是一个函数,如果用户点击开关,它会反转变量:
handleSwitch = (e) => {
this.setState({ enableSwitch: !this.state.enableSwitch });
}
我知道这是对一个老问题的晚回复,但这个简短的解决方案可能会帮助其他用户。
取值为true或false defaultChecked={true}
<input type="checkbox"
defaultChecked={true}
onChange={() => setChecked(!checked)}
/>
在我的情况下,我觉得“defaultChecked”不能正常工作的状态/条件。所以我用“checked”和“onChange”来切换状态。
Eg.
checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}