javascript - React - 带有对象的语义 ui 下拉菜单
问题描述
我正在映射一组对象并在下拉选择中使用名称 w/ semantic-ui-react。
我有一些模拟数据
mock.onGet("/dataschemas").reply(200, {
data: [
{
id: "2147483599",
selfUri: "/dataschemas/2147483599",
name: "Book Catalog"
},
{
id: "2147483600",
selfUri: "/dataschemas/2147483600",
name: "Business Articles"
}
]
});
在 cDM 中,我将对象的状态更新为dataschemas
async componentDidMount() {
await this.getSchemas();
}
getSchemas = async () => {
try {
const { data } = await axios.get("/dataschemas");
console.log(data);
const dataschemas = data.data;
this.setState({ dataschemas: dataschemas });
console.log("This is the dataschema list:", dataschemas);
} catch (error) {
console.error(Error(`Error fetching results list: ${error.message}`));
}
};
我的更改处理函数如下所示:
handleSchemaChange = (e, { value }) => this.setState({ name: value });
然后在渲染中我正在使用该<Dropdown>
组件
render() {
const { dataschemas } = this.state;
return (
<div>
<div>
<label>Select a dataschema: </label>
<Dropdown
placeholder="Select data schema"
clearable
fluid
selection
multiple={true}
options={dataschemas}
header="PLEASE SELECT A DATASCHEMA"
value={dataschemas.filter(({ name }) => name === this.state.name)}
onChange={this.handleSchemaChange}
/>
</div>
</div>
);
}
我无法让数据模式names
显示在下拉列表中,也无法在进行选择时更新标签。我不知道我是否缺少道具或没有正确更新状态,有什么想法吗?
代码沙盒在这里
解决方案
如https://react.semantic-ui.com/modules/dropdown/中所述,您应该使用以下结构在下拉列表中显示对象。
{
"key": "",
"text": "",
"value": ""
}
示例:将其用作下拉列表中的选项值
options={dataschemas.map(ds => {
return {
key: ds.id,
text: ds.name,
value: ds.selfUri
}
})}
推荐阅读
- python - 将 pandas 列四舍五入到年份
- swift - 使用可选的结构变量组合
- javascript - 如何在 asp.net 核心项目中添加“选择”
- iphone - 如何使用 Flutter 在 Windows 上安装 iPhone 模拟器?
- jquery - Django在forlopp中弹出Form
- c++ - 将范围的范围连接到范围
- forms - 存储在 Google/Microsoft 表单中的信息
- javascript - 重定向到另一个页面不起作用(Node.js)
- flutter - 提供者:在构建期间调用的 setState() 或 markNeedsBuild()
- flutter - 单击切换按钮时如何更改图像(颤动)