Как понять нажат chexbox или отпущен?

Question

[sinevik]

import React from "react";
import PageOne from "./pageone";


class Main extends React.Component {
	constructor(props){
		super(props);
			this.state = {
					WeatherObj:null,
			}
		}
	
	change(e){
		console.log(e);
	}
	
	render() {	
      	return(
      	<div>
      		<input id="checkBox" value="bmw" type="checkbox" onClick={this.change.bind(this)}/>
      	</div>
      	)
   	
	

	}

}
export default Main;

Простой вопрос, пользователь нажимает на chexbox и вызывает метод. Как мне в методе понять пользователь поставил галочку, или наоборот убрал??

Answer 1

[Максим]

У вас в событие передается нативный event, следовательно вы можете считать цель события, так сказать - event.target (элемент на котором произошел клик), что вернет DOM элемент( ваш чекбокс) и у него считать свойство checked

итого: event.target.checked (у вас это буквой e обозначено, значит e.currentTarget.checked , currentTarget - потому что так советует документация по реакту, потому что... - дальше уже сами =) )

p.s. обязательно читать

Comments

[sinevik]

Тогда если можно еще маленький вопрос, а почему оно не понимает label?

<div>
      		<input id="bmw" value="bmw" type="checkbox" onClick={this.change.bind(this)}/>
      		<label for="bmw">BMW</label>
      	</div>

Пишет что не знает свойство for

[Андрей Hecc]

sinevik, В реакте не используют нативные HTML свойства.
В основном, потому, что эти слова обычно являются зарезервированными в языке JS.
Вам там же в ошибке должно было написать:

You might use htmlFor instead

Answer 2

[Сергей Сунцев]

Привяжите value к состоянию

change(e){
    this.setState({WeatherObj : e.target.checked })
  }

и

<input id="checkBox" value={this.state.WeatherObj} type="checkbox" onClick={this.change.bind(this)}/>