Получить запись из массива объектов после рендеринга для просмотра

Question

У меня есть компонент, который передает javascript объекты в качестве реквизита другому компоненту для рендеринга. После рендеринга записей в виде div я хочу вернуть запись объекта, по которой щелкнули мышью, для отображения в третьем компоненте.

Каждый объект содержит несколько пар имя-значение, но я использую только ограниченные поля для первоначального отображения. Я застрял с возвращением всего объекта со всеми значениями. Я новичок в React, поэтому любая помощь приветствуется. Ниже приведен код:

export class ViewList extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        if (this.props.configs) {
            let summaryDisplay = this.props.configs.map((config) =>
                <ConfigSummary
                    key={config.id}
                    config={config}
                    onViewConfigClick={this.props.onViewConfigClick}
                />);
        } else
            return (null);
    }
}

class ConfigSummary extends Component {
    constructor(props) {
        super(props);

        this.state = {};
    }

    render() {
        return (
            <div className="row">
                <div className={cSummarySm}> {this.props.config.direction} </div>
                <div className={cSummaryMd}> {this.props.config.Object} </div>
                <div className={cSummarySm}> {this.props.config.version} </div >
                <div className={cSummaryLg}> {this.props.config.jobShortDescription} </div >
                <div className={cSummarySm}> <button className="btn btn-link" onClick={this.props.onViewConfigClick}>View</button></div >
            </div>);
    }
}

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

Answer 1

Вы должны передать некоторые параметры в функции onClick.

Вы можете сделать это следующим образом:

onClick={()=>this.props.onViewConfigClick(this.props)}

Это передаст все параметры в функцию дедушки.

Вы также можете передать идентификатор:

onClick={()=>this.props.onViewConfigClick(this.props.id)}

Мой совет: передайте идентификатор как объект, чтобы впоследствии можно было проще расширять параметры функции при необходимости:

onClick={()=>this.props.onViewConfigClick({
    id: this.props.id
})}