[英]How to check/uncheck a checkbox with onClick event on a button in React.js?
import React from 'react';
import './App.css';
import { Button } from 'react-bootstrap';
function App() {
return (
<div>
<input type="checkbox" id="checkboxForHamburger" />
<Button onClick={??????}> UNCHECK </Button>
</div>
);
}
export default App;
I have a Checkbox and a Button.我有一个复选框和一个按钮。 I want the checkbox to be in "unchecked" state if the button is clicked.
如果单击按钮,我希望复选框处于“未选中”状态 state 。
What I tried-我试过的-
<Button onClick={document.getElementById("checkboxForHamburger").checked = false}> UNCHECK </Button>
This is giving me an error - Cannot set property 'checked' of null这给了我一个错误 -无法设置 null 的属性“已检查”
First, you checkbox isn't controlled by a state value:首先,您的复选框不受 state 值的控制:
Let's start by adding a state:让我们从添加 state 开始:
const [checked, setChecked] = React.useState(true);
Then we give the value to the checkbox:然后我们将值赋给复选框:
<input type="checkbox" checked={checked} />
Then let's tell the button to toggle the checked state然后让我们告诉按钮切换选中的 state
<button onClick={() => {setChecked(old => !old)}}> {checked ? 'uncheck' : 'check'} </button>
Working example on this codesandbox此代码框的工作示例
You can do something like this-你可以做这样的事情-
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
checked: true
}
}
handleCheckbox = (e) => {
e.preventDefault();
this.setState({checked: false});
}
render() {
return (
<div>
<input type="checkbox" checked={this.state.checked} />
<button type="button" onClick={this.handleCheckbox}>Uncheck</button>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector("#app"));
If you want to make the checkbox
toggle by clicking the button then you can do this by changing the handleCheckbox
function and button text.如果您想通过单击按钮来切换
checkbox
,则可以通过更改handleCheckbox
function 和按钮文本来实现。
handleCheckbox = (e) => {
e.preventDefault();
this.setState({checked: !this.state.checked});
}
And the button would be按钮是
<button type="button" onClick={this.handleCheckbox}>{this.state.checked ? 'Uncheck': 'Check'}</button>
This will work:这将起作用:
import React from 'react';
import ReactDOM from 'react-dom';
export default class App extends React.Component {
constructor(){
this.state={check:false};
this.Toggle_checkbox=this.Toggle_checkbox.bind(this);
}
Toggle_checkbox=()=>{
this.setState({check:!this.state.check});
}
render(){
return (
<div>
<input type="checkbox" checked={this.state.check} />
<button onClick={this.Toggle_checkbox}> toggle </button>
</div>
);
}
}
ReactDOM.render(<App/>,document.getElementById('root'));
check: https://stackblitz.com/edit/react-xrt6wa检查: https://stackblitz.com/edit/react-xrt6wa
I just ran this error.我刚刚跑了这个错误。
Do you want to run it like the code below?你想像下面的代码一样运行它吗?
import React, { useState } from 'react';
import './App.css';
import { Button } from 'react-bootstrap';
function App() {
const [value, setValue] = useState(false);
return (
<div>
<input type="checkbox" value={value} id="checkboxForHamburger" />
<Button onClick={() => setValue(!value)}> UNCHECK </Button>
</div>
);
}
export default App;
If the value is boolean, we can tell whether it is checked or not.如果值为boolean,我们可以判断它是否被选中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.