Как правильно отлавливать cheсked в react?

Question

[djentleman666]

Пытаюсь сделать фильтер с чекбоксами, если выбрать галочкой или убрать галочку и только после нажатие кнопки применить, показывались бы те или иные итемы.
Не могу понять что не так, не отлавливается чекед соответсвенно не меняется состояние) буду рад

class MainComponent extends React.Component {
		constructor(props) {
			super(props);
			this.state = {
				show_title1: true,
				show_title2: false
			}
		}
		checkedChange() {
			this.props.applyChange(
				this.refs.show_title1.checked,
				this.refs.show_title2.checked
				)
		}
		applyChange(show_title1, show_title2) {
			this.setState({
				show_title1: show_title1,
				show_title2: show_title2
			})
		}
		render() {
			return 
				<div>
					<FilterItems 
						handleChange={this.checkedChange.bind(this)}
						show_title1={this.state.show_title1}
						show_title2={this.state.show_title2}>
					</FilterItems>
					<button onClick={this.applyChange}>Применить</button>
					<Items 
						show_title1={this.state.show_title1}
						show_title2={this.state.show_title2}>
					</Items>
				</div>
		}
	}
	class FilterItems extends React.Component {
		render() {
			return (
				<div>
				<input onChange={this.props.handleChange} 
				type="checkbox" 
				ref="show_title1" 
				checked={this.props.show_title1}/>Столбец 1

				<input onChange={this.props.handleChange} 
				type="checkbox" 
				ref="show_title2" 
				checked={this.props.show_title2}/>Столбец 2
				</div>
				)
		}
	}
	class Items extends React.Component {
		render() {
			return 
			<div>
			{this.props.show_title1? <div>Первый столбец</div>: null>}
			{this.props.show_title2? <div>Первый столбец</div>: null>}
			</div>
		}
	}

Answer 1

[Никита Гущин]

UPD1:

Использовать ref можно только в родительском компоненте: в вашем случае FilterItems.

checkedChange(name, val) {
  this.setState({ [name]: val });
}

class FilterItems extends React.Component {
    render() {
      return (
        <div>
          <input onChange={(e) => this.props.handleChange('show_title1', e.target.checked)} 
            type="checkbox" 
            checked={this.props.show_title1}/>Столбец 1

          <input onChange={(e) => this.props.handleChange('show_title2', e.target.checked)} 
            type="checkbox" 
            ref="show_title2" 
            checked={this.props.show_title2}/>Столбец 2
        </div>
     );
    }

Рабочий пример - jsfiddle.net/yuvuyrhv/25

Comments

[djentleman666]

вместо спана конечно инпут должен быть, но это не решает проблему

[Никита Гущин]

djentleman666: понял, сейчас обновлю ответ.

[djentleman666]

Никита Гущин: с ref так и не понял, а за ответ спасибо)

[Никита Гущин]

djentleman666: У Вас есть input с ref. Они попадают в this.refs. У вас изначально было обращение к refs в MainComponent, а можно только в родительском компоненте использовать - т.е. в FilterItems.

[djentleman666]

Никита Гущин: а еще вот на кнопке применить стоит хендлер applyChange, но самого метода, я не вижу, как тогда кнопка срабатывает?)

[Никита Гущин]

djentleman666: в моем примере кнопка не срабатывает. Повесьте свой обработчик и все будет)

Answer 2

[vsuhachev]

ref="show_title1" вместо ref={show_title1}

Comments

[djentleman666]

опять же невнимательность написал, но не взлетает