如何设置默认的复选框ReactJS?

在React中分配默认值checked="checked"后，我很难更新复选框状态。

var rCheck = React.createElement('input',
{
type: 'checkbox',
checked: 'checked',
value: true
}, 'Check here');

在分配checked="checked"后，我无法通过单击取消选中/选中来与复选框状态交互。

523495 次浏览
小开

要与复选框交互，您需要在更改复选框后更新复选框的状态。要设置默认值，可以使用defaultChecked。

一个例子:

<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />
小开

有几种方法可以做到这一点，以下是几种:

使用状态钩子编写:

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

小开
这是我前一段时间写的代码，可能有用。 你要用这条线=> this。

. State = {checked: false, checke2: 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;
}

超文本标记语言

  <div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>

这里是codepen => http://codepen.io/parlop/pen/EKmaWM

小开

除了正确答案，你还可以这样做: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 })}
小开 
 <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)   }

上面的句柄在选中或未选中时给你true或false的值

小开

我将状态设置为任何[]类型。并在构造函数中将状态设置为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)
}))
}

在输入元素中

< p > this.onServiceChange (e)} / > this.onServiceChange (e)} / > this.onServiceChange (e)} / > this.onServiceChange (e)} / > < / p >

过了一段时间我才明白。我想这可能对你们都有帮助。

小开

您可以将"true"或""传递给input复选框的checked属性。空引号("")将被理解为假的，该项将不被选中。

let checked = variable === value ? "true" : "";
<input
className="form-check-input"
type="checkbox"
value={variable}
id={variable}
name={variable}
checked={checked}
/>
<label className="form-check-label">{variable}</label>
小开
在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 >

小开

别把事情搞得太复杂。首先，理解下面给出的一个简单例子。你会明白的。在本例中，就在按下复选框之后，我们将从状态中获取值(最初为假)，将其更改为其他值(最初为真)&相应地设置状态。如果第二次按下复选框，它将再次执行相同的过程。抓取值(现在为真)，将其更改为假然后相应地设置状态(现在它又是假的。代码如下所示。

第1部分

state = {
verified: false
} // The verified state is now false

第2部分

verifiedChange = e => {
// e.preventDefault(); It's not needed
const { verified } = e.target;
this.setState({
verified: !this.state.verified // It will make the default state value(false) at Part 1 to true
});
};

第3部分

  <form>
<input
type="checkbox"
name="verified"
id="verified"
onChange={this.verifiedChange} // Triggers the function in the Part 2
value={this.state.verified}
/>
<label for="verified">
<small>Verified</small>
</label>
</form>
小开

在我的情况下，我觉得“defaultChecked”不能正常工作的状态/条件。所以我用“checked”和“onChange”来切换状态。

如。

checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}
小开
我尝试使用Class组件来完成这个: 您可以查看相同

的消息

...．．

class Checkbox extends React.Component{
constructor(props){
super(props)
this.state={
checked:true
}
this.handleCheck=this.handleCheck.bind(this)
}


handleCheck(){
this.setState({
checked:!this.state.checked
})
}


render(){
var msg=" "
if(this.state.checked){
msg="checked!"
}else{
msg="not checked!"
}
return(
<div>
<input type="checkbox"
onChange={this.handleCheck}
defaultChecked={this.state.checked}
/>
<p>this box is {msg}</p>
</div>
)
}

｝

小开

如果有人想处理具有多行的动态数据，这是用于处理动态数据的。

你可以检查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>
)
}
小开 
<div className="display__lbl_input">
<input
type="checkbox"
onChange={this.handleChangeFilGasoil}
value="Filter Gasoil"
name="Filter Gasoil"
id=""
/>
<label htmlFor="">Filter Gasoil</label>
</div>


handleChangeFilGasoil = (e) => {
if(e.target.checked){
this.setState({
checkedBoxFG:e.target.value
})
console.log(this.state.checkedBoxFG)
}
else{
this.setState({
checkedBoxFG : ''
})
console.log(this.state.checkedBoxFG)
}
};
小开

你可以使用状态变量“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)}
/>
小开 
import React, { useState } from 'react'




const [rememberUser, setRememberUser] = useState(true) //use false for unchecked initially




<input
type="checkbox"
checked={rememberUser}
onChange={() => {
setRememberUser(!rememberUser)
}}
/>

提交答案