[英]React - semantic ui dropdown with object
I'm mapping over an array of objects and using the name in dropdown selection w/ semantic-ui-react . 我正在映射对象数组,并在下拉选择w / 语义UI响应中使用名称。
I have some mock data 我有一些模拟数据
mock.onGet("/dataschemas").reply(200, {
data: [
{
id: "2147483599",
selfUri: "/dataschemas/2147483599",
name: "Book Catalog"
},
{
id: "2147483600",
selfUri: "/dataschemas/2147483600",
name: "Business Articles"
}
]
});
in cDM I'm updating state with the object as dataschemas
在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}`));
}
};
My change handler function looks like this: 我的变更处理程序函数如下所示:
handleSchemaChange = (e, { value }) => this.setState({ name: value });
Then in render I'm using the <Dropdown>
component 然后在渲染中,我使用<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>
);
}
I can't get the dataschema names
to show in the dropdown or get label to update when a selection is made. 进行选择时,我无法使数据模式names
显示在下拉列表中,也无法使标签更新。 I don't know if I'm missing a prop or not updating the state correctly, any ideas? 我不知道我是否缺少道具或没有正确更新状态,有什么想法吗?
As specified in https://react.semantic-ui.com/modules/dropdown/ you should use the following structure to display an object inside a Dropdown. 如https://react.semantic-ui.com/modules/dropdown/中所指定,您应使用以下结构在Dropdown中显示对象。
{
"key": "",
"text": "",
"value": ""
}
Example: use this as options value in your Dropdown 示例:在下拉菜单中将此值用作选项值
options={dataschemas.map(ds => {
return {
key: ds.id,
text: ds.name,
value: ds.selfUri
}
})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.