checked="checked"在 React 中为复选框分配默认值后，我无法更新复选框状态。
var rCheck = React.createElement('input',
{
type: 'checkbox',
checked: 'checked',
value: true
}, 'Check here');
分配后checked="checked"，我无法通过单击取消选中/选中来交互复选框状态。
如何设置默认选中复选框 ReactJS？
IT技术
reactjs
checkbox
2021-04-04 01:39:52
6个回答
要与框交互，您需要在更改复选框后更新它的状态。要获得默认设置，您可以使用defaultChecked.
一个例子：
<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />
有几种方法可以实现这一点，这里有一些：
使用 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上的现场演示。
如果复选框仅创建，React.createElement则使用该属性
defaultChecked。
React.createElement('input',{type: 'checkbox', defaultChecked: false});
归功于@nash_ag
在 React 渲染生命周期中，表单元素的 value 属性会覆盖 DOM 中的值。对于不受控制的组件，您通常希望 React 指定初始值，但不控制后续更新。要处理这种情况，您可以指定 defaultValue 或 defaultChecked 属性而不是 value。
<input
type="checkbox"
defaultChecked={true}
/>
或者
React.createElement('input',{type: 'checkbox', defaultChecked: true});
请查看有关defaultChecked以下复选框的更多详细信息：https :
//reactjs.org/docs/uncontrolled-components.html#default-values
除了正确答案外，您还可以这样做：P
<input name="remember" type="checkbox" defaultChecked/>