React DropDown列表值选择中的问题答案

【问题标题】：Problem in React DropDown list value selectionReact DropDown列表值选择中的问题
【发布时间】：2021-06-16 18:41:16
【问题描述】：

我正在为我的 react 应用程序的下拉菜单列表而苦苦挣扎。

问题是，我有一个 API，其中一个键 (key3) 具有逗号 (,) 分隔值，我想在下拉列表中显示这些值。 API 响应如下所示

{
    "key1": "user",
    "key2": "user",
    "key3": "abc,def,ghi"
}

我为此 API 响应创建了一个 reducer，并尝试使用 .map() 函数来处理 key3，大致如下： {this.props.activeRole.key3.map((r)=> <option>{r}</option>)}

但是 React 会抛出一个错误为Cannot read property 'map' of undefined。在哪里使用带有 .split() 的道具完全可以。然后它会产生冗余。

<option>{this.props.activeRole.key3.split(",")[0]</option>
<option>{this.props.activeRole.key3.split(",")[1]</option>
<option>{this.props.activeRole.key3.split(",")[2]</option>

假设 .split() 也可以，所以我在选择该选项时创建了一个动作创建器。

const selectedRoleAction = (role) => {
    return {
        type: "ROLE_SELECTED",
        payload: role,
    }
};
export default selectedRoleAction;

但是在调用这个动作减速器时，所选角色没有变化。下拉值变化时如何保存值？

<select className="form-control" onChange={() => this.props.selectedRoleAction((e)=>e.target.value)}>

<option value={this.props.activeRole.role.split(",")[0]>
{this.props.activeRole.role.split(",")[0]}</option>

<option value={this.props.activeRole.role.split(",")[1]>{this.props.activeRole.role.split(",")[1]}</option>

<option value={this.props.activeRole.role.split(",")[2]>{this.props.activeRole.role.split(",")[2]}</option>
</select>

请帮助...考虑到任何 .map() 或 .split() 方案，我会接受任何建议。

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案1】：

在您的代码中，key3 不是一个列表，它看起来像一个字符串，因此您需要在映射之前对其进行拆分。在你的 onChange 事件中，你还没有在你的回调函数中传递事件（即'e'）。

<select className="form-control" onChange={(e) => this.props.selectedRoleAction((e)=>e.target.value)}>
    {this.props.activeRole.key3.split(',').map((r)=> <option>{r}</option>)}
</select>

【讨论】：