Question

我有一个带有react-select中的<Select options={myoptions} onChange={this.mychangehandler}/>元素的react组件。我已经使用redux保存了一些设置，例如可以访问使用this.props.myreducer.dropdownvalue（已经过测试，这些值在首次渲染组件时可用）

根据redux道具，我想自动选择下拉菜单中的选项之一。如果<Select.../>等于1，如何告诉this.props.myreducer.dropdownvalue下拉列表自动选择选项2？

有无数的属性，但是以某种方式我找不到能帮助我自动选择正确条目的属性。

有什么想法吗？也可以自动触发onChange的解决方案也很受欢迎，但是如果没有的话，应该没有问题。

预先感谢：）

关于基督徒

编辑：这是完整的代码：

import React, {Component} from 'react';
import { connect } from 'react-redux';
import Auxiliary from '../../../../../../../hoc/Auxiliary/Auxiliary';
import classes from './Dropdown.module.css';
import Select from 'react-select';

class Dropdown extends Component {

changeSetting = (event) => {
    console.log('qid'+this.props.qid)
    console.log('event: '+JSON.stringify(event))
    if(this.props.certs.certquestions[this.props.qid].red === event.id)
    {
        this.props.colorchanger("red")
    }else if(this.props.certs.certquestions[this.props.qid].yellow === event.id)
    {
        this.props.colorchanger("yellow")
    }else if(this.props.certs.certquestions[this.props.qid].green === event.id)
    {
        this.props.colorchanger("green")
    }
}
render(){
    const options = []
    const qid = this.props.qid
    console.log('qid:'+qid)
    const question = this.props.certs.certquestions[qid]
    const opt = question.options.split("|")
    for(let i = 0;i<opt.length;i++){
        let optname = opt[i]
        options.push({value:i, label:optname, id:i})
    }
    let notes = "";
    let selectedOption = null;
    if(this.props.loadp)
    {
        let progress = this.props.certs.loadedProgress[this.props.users.users[this.props.users.currentuser].target_id+'_'+this.props.q]
        if (typeof progress !== 'undefined')
        {
            notes = progress.notes
            selectedOption = progress.selectedOption
        }
    }
return(
    <Auxiliary>
        <h3>{question.title}</h3>
    <Select className = {classes.Dropdown} options={options} onChange={this.changeSetting}/ value={selectedOption}> //selectedOption is an Integer
    <textarea value = {notes}/>
</Auxiliary>
)
}
}
const mapStateToProps = state => {
return {
    certs: state.certs,
    users: state.users
};
}
export default connect(mapStateToProps, null)(Dropdown);

选项具有从0到9的不同标签以及值和ID。我尝试将value={selectedOption}添加到Select元素，也尝试使用标签代替它，但是它始终仅显示“ Select ...”。 ”占位符，并且不会选择该选项并触发onChange。知道我在做什么错吗？

解决：我现在知道我做错了，非常感谢:)我需要将带有值，id和标签的对象传递给value：）

Answer 1

我需要传递一个像这样的对象：{"value":0,"label":"v1","id":0}来赋值

React-Select触发选项选择

1 个答案: