0

从一个数组中，我将它显示为一个组件（Box.js）上的列表，并存储在另一个组件（Search.js）中的反应选择中。它们都是属于父组件（trial.js）的同一级别的子级。

最终，我想通过单击列表或从反应选择中更改/选择来显示对象。我已将事件处理程序提升到它们的父级，并成功地独立显示了选定的对象。

但是，我似乎无法将 onClick 与 onChange 同步。详细地说，我希望单击事件处理程序使所选列表变为粗体并更改 react-strap 中显示的项目，反之亦然。react主页中给出的提升状态和同步事件处理程序示例使用文本输入，这对我正在尝试做的事情没有真正的帮助..

父）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;
4

1 回答 1

1

我认为您的代码中有一个问题：

从 react-select 文档中，当您处理 onChange 事件处理程序时，您将以 {value:'',label:''} 对的形式从中获取所选选项，您已通过选项数组传递给组件, 所以如果你的选项数组是这样的：[{value: 'sth', label:'label'}]，当 onChange 事件被触发并且其中一个选项被选中时，onChange 事件处理程序缓存 {value: 'sth ', label:'label'} 数组中的对象，如果要将数据传递给父对象，则应编写 onChange={data => this.props.handleChange(data.value) } 所以以这种方式，您的值是具有颜色等信息的真实对象，但您只是在代码中传递正在处理的原始对象 -> selected.color 而所选对象是 {value:{}，label:''} 因为您只传递了 e 对象，而应该像 e.value 一样传递，因此它包含颜色信息。

于 2018-09-06T21:26:44.253 回答