javascript - React-Select 下拉菜单未在输入中显示数组或值的选项
问题描述
所以我遇到了这个问题,组件加载得很好,出现了一个下拉列表,但它没有显示标签或值。当我单击该选项时,它会显示一个选中的框,但框中没有任何内容。请看下面的代码。我正在使用最新的 React-Select 进行多选输入,但找不到任何关于如何为多选构建数组的文档。
import React, { Component } from 'react';
import '../index.css';
import Select from "react-select";
export class Invite extends Component {
constructor(props) {
super(props);
this.state = {
multiValue: [],
filterOptions: []
};
this.handleMultiChange = this.handleMultiChange.bind(this);
}
componentDidMount = () => {
let userList = [];
let list = [];
list = this.props.hub.users;
for (var i = 0; i < list.length; i++) {
userList.push([{label: list[i].userName, value: list[i].userName }]);
}
this.setState({ filterOptions: userList });
}
handleMultiChange(option) {
this.setState(state => {
return {
multiValue: option
};
});
}
render() {
return (<div className="invite">
<Select
name="Users"
placeholder="Users"
value={this.state.multiValue}
options={this.state.filterOptions}
onChange={this.handleMultiChange.bind(this)}
isMulti
/>
</div>);
}
}
解决方案
你做错了componentDidMount
userList
应该是一个对象数组而不是数组数组。
componentDidMount = () => {
let userList = [];
let list = [];
list = this.props.hub.users;
for (var i = 0; i < list.length; i++) {
userList.push({
label: list[i].userName,
value: list[i].userName
});
}
this.setState({
filterOptions: userList
});
}
有关更多详细信息,请访问文档。
推荐阅读
- python - 由于嵌套 for 循环内的 numpy 导致代码太慢
- grails - 缺少 grails 4 groovy 的日期增强方法
- amp-html - 实施 amp-consent 的问题
- reactjs - 使用 Jest 和 Enzyme 测试 Material-UI 组件时无法读取未定义的属性“拥有”
- javascript - 使用 document.location.replace 重定向后如何记住以前的 URL
- typescript - 具有属性的类,其中属性本身包含类型的属性
- r - 计算特征值时发出警告
- flutter - 在继续其余代码之前颤动等待条件满足
- javascript - 参考加载 Stripe Elements API 时出错
- php - 嵌套的 jQuery 代码总是首先返回“未定义”?