我从一个数组中将其显示为一个组件(Box.js)上的列表,并存储在另一个组件(Search.js)中的react-select中。它们都是属于父级组件(trial.js)的同级子级。
最终,我想通过从列表中单击或从react-select中进行更改/选择来显示对象。我将事件处理程序交给了他们的父母,并成功地独立显示了所选对象。
但是,我似乎无法将onClick与onChange同步。详细地说,我希望click事件处理程序使选定的列表变为粗体,并在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;
具有react-select的子对象)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;
答案 0 :(得分:0)
我认为您的代码中有一个问题:
从react-select文档中,当您处理onChange事件处理程序时,您将以传递给组件的{value:'',label:''}对的形式从中选择选项。通过options数组,因此,如果您的options数组类似于:[{value:'sth',label:'label'}],则在触发onChange事件并选择其中一个选项时,onChange事件处理程序将缓存{value :'sth',label:'label'}对象,如果您想将数据传递给父对象,则应编写onChange = {data => this.props.handleChange(data.value)},这样,您的值是具有颜色等信息的真实对象,但是您只是在传递原始处理的对象,例如-> selected.color,而您选择的对象是{value:{},label:' '},因为您仅传递了e对象,而应像e.value这样传递,因此它包含颜色信息。