我有麻烦更新复选框的状态后,它被分配的默认值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"后,我无法通过单击取消选中/选中来交互复选框状态。
当前回答
有几种方法可以做到这一点,以下是几种:
使用State Hooks编写:
function Checkbox() {
const [checked, setChecked] = React.useState(true);
return (
<label>
<input type="checkbox"
defaultChecked={checked}
onChange={() => setChecked(!checked)}
/>
Check Me!
</label>
);
}
ReactDOM.render(
<Checkbox />,
document.getElementById('checkbox'),
);
下面是JSBin上的一个现场演示。
使用组件编写:
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"
defaultChecked={this.state.isChecked}
onChange={this.toggleChange}
/>
Check Me!
</label>
);
}
}
ReactDOM.render(
<Checkbox />,
document.getElementById('checkbox'),
);
下面是JSBin上的一个现场演示。
其他回答
我将状态设置为任何[]类型。并在构造函数中将状态设置为null。
onServiceChange = (e) => {
const {value} = e.target;
const index = this.state.services.indexOf(value);
const services = this.state.services.filter(item => item !== value);
this.setState(prevState => ({
services: index === -1 ? prevState.services.push(value) && prevState.services : this.state.services.filter(item => item !== value)
}))
}
在输入元素中
this.onServiceChange (e)} / > this.onServiceChange (e)} / > this.onServiceChange (e)} / > this.onServiceChange (e)} / >
过了一段时间我才明白。我想这可能对你们都有帮助。
如果该复选框仅与React一起创建。createElement然后属性 使用defaultChecked。
React.createElement('input',{type: 'checkbox', defaultChecked: false});
归功于@nash_ag
你可以使用一个状态变量"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 });
}
我知道这是对一个老问题的晚回复,但这个简短的解决方案可能会帮助其他用户。
import React, { useState } from 'react'
const [rememberUser, setRememberUser] = useState(true) //use false for unchecked initially
<input
type="checkbox"
checked={rememberUser}
onChange={() => {
setRememberUser(!rememberUser)
}}
/>
除了正确答案,你还可以这样做:P
<input name="remember" type="checkbox" defaultChecked/>