React redux中的下拉状态

Question

我正在尝试创建一个下拉组件，并希望在我的应用程序中使用所选的选项。当时的想法是，当用户选择一个Dropdown值时，其状态会保存在Redux reducer中，然后将该值用于其他操作。但作为一个初学者，我一直坚持执行部分。

注意：下拉列表没有提交按钮，只有选择下拉选项的操作。

在此阶段之前，我的代码如下所示：

RoleDropdown.js

class RoleDropdown extends Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
}
...
...
render() {
return (
<div>
<select 
onChange={() => this.props.selectedRoleAction()}
name="roles" className="form-control">
<option>Select a Role</option>
<option value="ABC" >ABC</option>
<option value="DEF" >DEF</option>
<option value="GHI" >GHI</option>
</select>
<p>role is: {this.props.activeRole.value}</p>   //No value output here
</div>
)
}

SelectedRoleAction.js

const selectedRoleAction = (role) => {
const [value, setValue] = useState("")
setValue({ value: role.target.value })
console.log("event from drop down is " + role)  //I cant see any logged value as well
return {
type: "ROLE_SELECTED",
payload: role,
}
};

我哪里做错了？"；setValue"；可以用于动作减速器吗？

Answer 1

操作创建者不持有任何本地状态。它只是一个从一些参数映射到Redux操作的函数，Redux操作是一个具有属性type和payload的对象。

这是一个动作创建者功能：

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

在这种情况下，您的组件将调用：

onChange={(e) => this.props.selectedRoleAction(e.target.value)}

您正在尝试从事件映射到操作创建者中的值，而不是组件中的值。这是不寻常的，我建议采用上述方法，但它是可行的。

const selectedRoleEventHandler = (event) => {
return {
type: "ROLE_SELECTED",
payload: event.target.value,
}
};

在这种情况下，您的组件将调用：

onChange={(e) => this.props.selectedRoleEventHandler(e)}

或者只是：

onChange={this.props.selectedRoleEventHandler}

现在您正在调用没有参数this.props.selectedRoleAction()的函数，这将不起作用。

---

这只是创造了动作。我假设您使用的是connect高阶组件，因此调用this.props.selectedRoleAction会将其调度到Redux。

实际状态是通过Redux减速器功能设置的。

---

如果通过Redux存储和更新值，则它不应也处于组件状态。

您正在处理一个受控组件，因此需要在select上设置value属性。

我正在禁用"；选择角色"；并且还给它一个空字符串CCD_ 8的值。如果未设置this.props.activeRole，我将使用该值作为回退。

<select
name="roles"
className="form-control"
value={this.props.selectedRole || ""}
onChange={(e) => this.props.selectedRoleAction(e.target.value)}
>
<option value="" disabled>Select a Role</option>
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
<option value="GHI">GHI</option>
</select>