React передать данные в другой компонент по onclick?

Question

[zaoozik]

Начал переписывать front одного проекта на React, параллельно знакомлюсь с ним.
Суть такая:
На странице выводится таблица со списком карт. В каждой строчке таблицы есть кнопка, при нажатии которой
должно открываться модальное окно (bootstrap 4), и в это модальное окно подставляется код карты, строка с которой была выбрана.
Таблица со списком карт и модальное окно сделаны отдельными React компонентами.

class CardModal extends React.Component{
    render(){
        return(
            <div className="modal fade" id="CardModal">
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title">Карта</h5>
                            <button type="button" className="close"  onClick="clearForm();" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">
                            <CardInfo card_code={this.state.code}/>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-primary" onClick="saveCard();">Сохранить</button>
                            <button type="button" className="btn btn-secondary" onClick="clearForm();" data-dismiss="modal">Отмена</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}


class CardsList extends React.Component{
    render(){
        let temp = this.props.cards;
        let cards = temp.map(function (item, index){

            return (
                <tr key={'id_'+item.code}>
                    <td>
                        <input type={'checkbox'} id={item.code} />
                    </td>
                    <td>{item.code}</td>
                    <td></td>
                    <td>{item.holder_name}</td>
                    <td>{item.accumulation}</td>
                    <td>
                           // нужная кнопка открытия модального окна
                        <button data-toggle="modal"   data-target="#CardModal" onClick={} type="button" className="fa fa-eye" aria-hidden="true" title="Просмотр"></button>
                    </td>
                </tr>
            )
        })

        return (
            <div>
                <table id={'scrollData'}>
                    <thead>
                        <tr>
                            <th></th>
                            <th>КОД</th>
                            <th>ТИП</th>
                            <th>НАКОПЛЕНИЯ</th>
                            <th>ФИО</th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody id={'tbody'} style={{height: '485px'}}>
                        {cards}
                    </tbody>
                </table>
                   // Компонент с модальным окном
                <CardModal/>
            </div>

    );

    }
}

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

Answer 1

[vaskadogana]

onClick = (e) =>{
e.target.value  < это ваше значение,  item.code
тут вызываете открытие вашего модального окна, через state или напрямую по рефс и кладете сюда
если рефс то примерно так 
this.refs. имя рефс. имя функции в компоненте модал(или можно прямо setState({code: e.target.value})

}
выше функция которая вне рендер
<button data-toggle="modal"  
             data-target="#CardModal" 
             onClick={this.onClick} <<<<<<<
             type="button" 
             value = {item.code}<<<<<<<<<<<
             className="fa fa-eye" 
             aria-hidden="true" 
             title="Просмотр"></button>

p.s. только не вижу где вы коструктор и state объявляете
типа такого

сonstructor(props) {
	    super(props);
	      this.state = {
	        eventFilterParking:  	'',
	        eventFilterFuel: 		'',
	        eventFilterFuel_Drain: 	'',
	        eventFilterSpeed: 		'',
	        eventFilterVoltage: 	         '',
	        eventFilterTerm: 		'',

	      }
	}

Answer 2

[Илья Герасимов]

onClick={this.onClick.bind(null,item)}

onClick = (item) => {
    this.setState({ editItem : item, showModal : true});
    // ...
}

<CardModal item={this.state.editItem} show={this.state.showModal}/>

В компоненте модалки эти атрибуты будут тут this.props.item/show

Answer 3

[zaoozik]

Илья Герасимов Илья Герасимов

Спасибо, вдуплил)
Нужно по событию onClick менять state родительского компонента <CardsList />, и передавать измененные данные в виде props для дочернего <CardModal />, соответственно при этом авотматом вызывается render дочернего.
Вроде так?)

vaskadogana vaskadogana

А Вы предложили вариант наоборот, то есть с помощью refs вызвать функцию в дочернем компоненте <CardModal />, которая будет менять его state. Или это то же самое?

Comments

[vaskadogana]

zaoozik я предложил вариант когда CardsList не будет ререндериться, а ререндер будет только у модал. Вроде как экономия, вдруг у вас список будет более 1к.

То же самое читал за bind его лучше делать в конструкторе или использовать стрелочную функцию
onClick={this.onClick.bind(null,item)}
здесь выйдет, что нужно сделать, например 1000 раз бинд

[vaskadogana]

p.s. хз насколько про бинд правда, но если делать ререндер 500 строк, то это становится заметно.