Как установить / снять флажок с событием onClick для кнопки в React. js?

Question

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;

У меня есть флажок и кнопка. Я хочу, чтобы флажок находился в «непроверенном» состоянии при нажатии кнопки.

Что я пробовал -

<Button onClick={document.getElementById("checkboxForHamburger").checked = false}> UNCHECK </Button>

Это дает мне ошибку - Невозможно установить свойство ' проверено 'из нуля

Answer 1

Во-первых, ваш флажок не контролируется значением состояния:

Давайте начнем с добавления состояния:

const [checked, setChecked] = React.useState(true);

Затем мы передадим значение флажку:

<input type="checkbox" checked={checked} />

Тогда давайте скажем кнопке переключить проверенное состояние

<button onClick={() => {setChecked(old => !old)}}> {checked ? 'uncheck' : 'check'} </button>

Рабочий пример для этого кода и поля

Answer 2

Это будет работать:

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'));

проверка: https://stackblitz.com/edit/react-xrt6wa

Answer 3

Я только что запустил эту ошибку.

Хотите запустить ее, как показано ниже:

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;

Если значение логическое, мы можем сказать, проверено оно или нет .

Answer 4

Вы можете сделать что-то вроде этого -

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"));

Обновить

Если вы хотите сделать переключение checkbox нажатием кнопки, то вы можете сделать это, изменив handleCheckbox функция и текст кнопки.

  handleCheckbox = (e) => {
    e.preventDefault();
    this.setState({checked: !this.state.checked});
  } 

И кнопка будет

<button type="button" onClick={this.handleCheckbox}>{this.state.checked ? 'Uncheck': 'Check'}</button>