Изменяя отображаемое значение response-select, нажимая на внешний компонент в React

Question

Из одного массива он отображается в виде списка на одном компоненте (Box.js) и сохраняется в реагировать на выбор в другом компоненте (Search.js). Оба они - дети одного уровня, принадлежащие родительскому компоненту (trial.js).

В конечном счете, я хочу отобразить объект, щелкнув по списку или изменив / выбрав из реакции-выбора. Я поднял обработчики событий для их родителей и сумел отобразить выбранный объект самостоятельно.

Однако я не могу синхронизировать onClick с onChange. Подробно, я хочу, чтобы обработчик событий щелчка выделил выделенный список и изменил отображаемый элемент в реагирующем ремешке и наоборот. В приведенном на домашней странице реагирования примере обработчика состояния подъема и синхронизации используется ввод текста, что на самом деле не помогает в том, что я пытаюсь сделать.

Родитель) Trial.js:

import React, { Component } from 'react';
import { colourOptions } from './data';
import { Grid, Row } from 'react-flexbox-grid';
import Box from './box';
import Remote from './remote';

    class Trial extends Component{
        constructor(props) {
            super(props);
            this.state = {
                selected:'',
            }
        }

        getValue(e){
            this.setState({
                selected: e
            })
        }


          render() {
              return ( 
                <Grid fluid className="full-height">
                    <Row className="full-height">

                    <Box 
                        colourOptions={colourOptions}
                        handleChange={this.getValue.bind(this)}
                    />

                    <Remote 
                        colourOptions={colourOptions}
                        selected={this.state.selected}
                        handleChange={this.getValue.bind(this)}
                    />
                    </Row>
                </Grid>
          ) 
        }
    }

    export default Trial;

Ребенок со списком) Box.js:

import React, { Component } from 'react';
import { Col } from 'react-flexbox-grid';

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

    clicked(e){
        this.props.handleChange(e)
    }

    render() {

          return ( 
                <Col md={9} className="col2">
                    <ul>
                        {this.props.colourOptions.map((r,i) => 
                            <li key={i} onClick={()=>this.clicked(r)}> {r.label} </li>
                            )}
                    </ul>
                </Col>


      ) 
    }
}

export default Box;

дочерний элемент с реагировать на выбор) remote.js:

import React, { Component } from 'react';
import Select from 'react-select';
import { Col } from 'react-flexbox-grid';
import RenderComp from './rendercomp';

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

    clicked(e){
        this.props.handleChange(e)
    }

      render() {
          return ( 

        <Col md={3} className="col1">

            <Select
                options={this.props.colourOptions}
                onChange={this.clicked.bind(this)}
            />                
            <RenderComp
                selected={this.props.selected}
            />
        </Col>


      ) 
    }
}

export default Remote;

дочерний файл remote.js для рендеринга выбранного объекта:

import React, { Component } from 'react';

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

    renderComp(selected){
        return(
            <ul>
                <li>
                {selected.label}
                </li>
                <li>
                {selected.color}
                </li>
            </ul>            
        )
    }

    render() {
        if(this.props.selected){
            return (
                <div>
                    {this.renderComp(this.props.selected)}
                </div>
                );
        }else{
            return(
                <div></div>
            )
        } 
    }
}

export default Remote;

Answer 1

Я думаю, что в вашем коде есть одна проблема:

из документации по реакционному выбору, когда вы обрабатываете обработчик события onChange, вы получите из него выбранную опцию в виде пары {value: '', label: ''}, которую вы передали компоненту через массив опций, поэтому, если ваш массив опций подобен: [{value: 'sth', label: 'label'}], когда происходит событие onChange и выбирается одна из опций, обработчик события onChange кэширует {значение : 'sth', label: 'label'} объект из массива, и если вы хотите передать данные родителю, вы должны написать onChange = {data => this.props.handleChange (data.value)} так, таким образом ваше значение - это реальный объект, имеющий информацию типа color, но вы просто передаете необработанный объект, который обрабатывается как -> selected.color в вашем коде, в то время как выбранный объект - {value: {}, label: ' '} потому что вы передали только объект e и должны быть переданы как e.value, чтобы он содержал информацию о цвете.