React-redux 中的下拉 state

Question

我正在尝试创建一个下拉组件，并希望在我的应用程序中使用该选定选项。 想法是当用户 select 是一个下拉值时，它的 state 保存在 Redux 减速器中，然后将该值用于其他操作。 但作为一个初学者，我坚持执行部分。

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

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

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

动作创建者不持有任何本地 state。 它只是一个 function 映射从一些 arguments 到 Redux 动作，它是一个 ZA8CFDE6331BD59EB2ACZ66F8 type和payload

这是一个动作创建者 function：

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

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

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

您正在尝试将 map 从事件到操作创建者中的值而不是组件中的值。 这是不寻常的，我会推荐上述方法，但它是可行的。

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

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

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

要不就：

onChange={this.props.selectedRoleEventHandler}

现在你调用 function 没有 arguments this.props.selectedRoleAction()这将不起作用。

---

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

实际的 state 是通过您的 Redux 减速机 function 设置的。

---

如果该值是通过 Redux 存储和更新的，那么它也不应该在组件 state 中。

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

我正在禁用“选择角色”，并给它一个空字符串""的值。 如果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>