Javascript 反应选择触发选项选择

Javascript 反应选择触发选项选择,javascript,reactjs,react-select,Javascript,Reactjs,React Select,我有一个react组件,其中包含react select中的元素。我已使用可访问的redux保存了一些设置,例如使用this.props.myreducer.dropdownvalue(已测试,首次渲染组件时可使用这些值) 根据redux道具,我想在下拉列表中自动选择一个选项。如果this.props.myreducer.dropdownvalue等于1,我如何告诉下拉列表自动选择选项2 有无数的属性,但不知何故,我发现没有人可以帮助我自动选择正确的条目 有什么想法吗?首选自动触发onChang

我有一个react组件,其中包含react select中的
元素。我已使用可访问的redux保存了一些设置,例如使用
this.props.myreducer.dropdownvalue
(已测试,首次渲染组件时可使用这些值)

根据redux道具,我想在下拉列表中自动选择一个选项。如果
this.props.myreducer.dropdownvalue
等于1,我如何告诉
下拉列表自动选择选项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);
import React,{Component}来自'React';
从'react redux'导入{connect};
从“../../../../../../../../hoc/Auxiliary/Auxiliary”导入辅助项;
从“./Dropdown.module.css”导入类;
从“反应选择”导入选择;
类下拉列表扩展组件{
更改设置=(事件)=>{
console.log('qid'+this.props.qid)
console.log('event:'+JSON.stringify(event))
if(this.props.certs.certquestions[this.props.qid].red==event.id)
{
此.props.colorchanger(“红色”)
}else if(this.props.certs.certquestions[this.props.qid].yellow==event.id)
{
此.props.colorchanger(“黄色”)
}else if(this.props.certs.certquestions[this.props.qid].green==event.id)
{
此.props.colorchanger(“绿色”)
}
}
render(){
常量选项=[]
const qid=this.props.qid
console.log('qid:'+qid)
const question=this.props.certs.certquestions[qid]
const opt=question.options.split(“|”)
for(设i=0;i{
返回{
证书:state.certs,
用户:state.users
};
}
导出默认连接(MapStateTops,null)(下拉列表);
选项具有不同的标签、值和id(从0到9)。我尝试将
value={selectedOption}
添加到Select元素,也尝试使用标签,但它始终只显示“Select…”占位符,而不选择选项并触发onChange。知道我做错了什么吗


解决:我现在知道我做错了什么,非常感谢:)我需要传递一个带有value、id和label-to-value的对象:)

我需要这样传递一个对象:
{“value”:0,“label”:“v1”,“id”:0}
to-value

尝试共享您的完整代码,或者更好地为您的代码创建一个codesandbox场景。您使用“value”吗属性?是的,我尝试了value、defaultValue和defaultInputValue,但是没有人选择了正确的条目。在这种情况下,value属性是必需的。如果没有值,它将无法工作。您可以演示如何将其与value一起使用吗?可能是您使用错误。好的,抱歉,编辑了它