I want to implement a simple thing, so that you can select checkboxes for example lines, and after clicking on the button, you can only show the ones with a tick.

I can not catch the event in the main component.

Thought ref would help me, but apparently I misunderstood their purpose

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> } }

    2 answers 2

    I see at least one mistake. Although it may not be a mistake, as I write only in JSX. Shouldn't ref be quoted?

    At the same time you don’t need a ref at all. You can do something like:

     <input type="checkbox" checked={this.state.isChecked} onChange={this.handleInputChange} /> // this.handleInputChange function() { this.setState({ isChecked: !this.state.isChecked }) }
    • one
      And for some reason, do you have a closing triangular bracket after null {this.props.show_title2? <div>Первый столбец</div>: null>} {this.props.show_title2? <div>Первый столбец</div>: null>} - iliaznk

    In my opinion, you are generally namudri. Why do separate components for checkboxes and for Item themselves?

    In the React philosophy, the data goes one way, top to bottom. I will offer the following structure:

     MainComponent Button <ul>Item, Item, Item,...</ul>

    Let the data array for the Items live inside the MainComponent and pass down the hierarchy via props.

    Item let contains in itself and display of the name and checkbox, changing its state (state).

    “Unnecessary” elements can be simply hidden or removed altogether from the array of source data - depending on your application's logic?

    If you hide it, you can directly change the state to "hidden" in Item, and in this case do not draw them at all.

    If you delete, transfer the MainComponent method from MainComponent to Item, which will mark the deleted Item for deletion, and by pressing the button it will update the array of initial data, removing the marked ones.