通过单击React中的外部组件来更改react-select的显示值

Question

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

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

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

父(试用.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;

带列表的孩子(包装盒.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;

具有反应选择的孩子(远程.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

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

从 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 一样传递，以便它包含颜色信息。