2

Хочу реализовать простую штуку, чтобы можно было выбрать галочками например строки, и после нажатия на кнопку применить показывать те лишь на которой галочка.

Не могу отловить событие в главном компоненте.

Думал мне поможет 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>
    }
}

2 ответа 2

1

Я вижу как минимум одну ошибку. Хотя может это не ошибка, так как я пишу только в JSX. Разве ref не должен заключаться в кавычки?

При этом вам вообще не нужен ref, в приципе. Можно сделать что-то типа:

<input
    type="checkbox"
    checked={this.state.isChecked}
    onChange={this.handleInputChange}
    />

// this.handleInputChange
function() {
    this.setState({
        isChecked: !this.state.isChecked
    })
}
1
  • 1
    А ещё у вас зачем-то закрывающая треугольная скобка стоит после null {this.props.show_title2? <div>Первый столбец</div>: null>}
    – iliaznk
    Commented 11 янв. 2016 в 6:35
0

По-моему, вы в общем намудрили. Зачем отдельные компоненты для чекбоксов и для самих Item'ов?

В философии React, данные идут в одну сторону, сверху вниз. Предложу такую структуру:

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

Массив данных для Items пусть живёт внутри MainComponent и передаётся вниз по иерархии через props.

Item пусть содержит в себе и отображение названия и checkbox, меняющий его состояние (state).

«Ненужные» элементы можно просто прятать, или удалять вообще их из массива исходных данных – смотря, какая у вашего приложения логика?

Если прятать – можно прямо в Item'ах менять state на "спрятан" и в таком случае не отрисовывать их вообще.

Если удалять – передавать из MainComponent в Item'ы метод MainComponent'а, который будет помечать к удалению выключенные Item'ы, а по нажатию на кнопку обновит у себя массив исходных данных, удалив помеченные.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.