Хочу реализовать простую штуку, чтобы можно было выбрать галочками например строки, и после нажатия на кнопку применить показывать те лишь на которой галочка.
Не могу отловить событие в главном компоненте.
Думал мне поможет ref, но видимо я не правильно понял их назначение
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>
}
}