我有麻烦更新复选框的状态后,它被分配的默认值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"后,我无法通过单击取消选中/选中来交互复选框状态。
当前回答
如果该复选框仅与React一起创建。createElement然后属性 使用defaultChecked。
React.createElement('input',{type: 'checkbox', defaultChecked: false});
归功于@nash_ag
其他回答
除了正确答案,你还可以这样做:P
<input name="remember" type="checkbox" defaultChecked/>
有几种方法可以做到这一点,以下是几种:
使用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上的一个现场演示。
如果有人想处理具有多行的动态数据,这是用于处理动态数据的。
你可以检查rowId是否等于0。
如果它等于0,那么您可以将布尔值的状态设置为true。
interface MyCellRendererState {
value: boolean;
}
constructor(props) {
super(props);
this.state = {
value: props.value ? props.value : false
};
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
}
handleCheckboxChange() {
this.setState({ value: !this.state.value });
};
render() {
const { value } = this.state;
const rowId = this.props.rowIndex
if (rowId === 0) {
this.state = {
value : true }
}
return (
<div onChange={this.handleCheckboxChange}>
<input
type="radio"
checked={this.state.value}
name="print"
/>
</div>
)
}
在我的情况下,我觉得“defaultChecked”不能正常工作的状态/条件。所以我用“checked”和“onChange”来切换状态。
Eg.
checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}
取值为true或false defaultChecked={true}
<input type="checkbox"
defaultChecked={true}
onChange={() => setChecked(!checked)}
/>