javascript - React-Select 触发选项的选择
问题描述
我有一个带有<Select options={myoptions} onChange={this.mychangehandler}/>
来自 react-select 的元素的反应组件。我已经使用可以访问的 redux 保存了一些设置,例如使用this.props.myreducer.dropdownvalue
(已经测试,这些值在第一次渲染组件时可用)
根据 redux 道具,我想自动选择下拉列表中的选项之一。如果等于 1 ,我如何告诉<Select.../>
下拉菜单自动选择选项 2 ?this.props.myreducer.dropdownvalue
有无数的属性,但不知何故,我发现没有一个可以帮助我自动选择正确的条目。
有任何想法吗?自动触发 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":0,"label":"v1","id":0}
:
推荐阅读
- javascript - 正则表达式:15 个整数,最多两位小数,不包括 0
- html - 无法与弹性盒分离
- sql - 截断并添加 ... 如果字符串超过 x 个字符
- c# - 将变量传递给 ORDER BY sql 语句
- spring-data-neo4j - Spring Data Neo4j 关系存储库方法
- java - 在java中将列表划分为固定数量的列表
- python - 如何在 python 中从 lambda 连接到 AWS RDS 代理?
- django - Django - 仅出于过滤目的修改字段值
- sql - 在 Postgres 中获取时差时出错
- python-3.x - 在 Pandas 数据框中插入一行会将 NaN 转换为 NaT