从一个数组中,我将它显示为一个组件(Box.js)上的列表,并存储在另一个组件(Search.js)中的react-select中 . 它们都是属于父组件的同级子项(trial.js) .
最后,我想通过单击列表或更改/选择react-select来显示对象 . 我已经将事件处理程序提升到他们的父母并成功地独立显示所选对象 .
但是,我似乎无法将onClick与onChange同步 . 详细地说,我希望click事件处理程序使选定列表变为粗体并更改react-strap中显示的项目,反之亦然 . 在反应主页中给出的提升状态和同步事件处理程序示例使用文本输入,这对我正在尝试做的事情没有任何帮助 .
父母)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;
1 回答
我认为您的代码中存在一个问题:
从react-select文档中,当您处理onChange事件处理程序时,您将以{value:'',label:''}形式从您通过options数组传递给组件的形式中获取所选选项,所以如果您的选项数组如下:[{value:'sth',label:'label'}],当触发onChange事件并选择其中一个选项时,onChange事件处理程序会缓存{value:'sth来自数组的',label:'label'}对象,如果你想将数据传递给父对象,你应该写onChange = {data => this.props.handleChange(data.value)}这样你的 Value 是具有颜色等信息的真实对象,但是您只是在代码中传递正在处理的原始对象,如 - > selected.color,而所选对象是{value:{},标签:''}因为你只传递了e对象,而应该像e.value一样传递它,因此它包含颜色信息 .