代码之家 › 专栏 › 技术社区 › lellefood

selectfield显示与值不同的字符串

material-ui redux reactjs

lellefood · 技术社区 · 6 年前

我正在做一个使用react和redux的项目。

我想要我的 SelectField 向用户显示字符串,但在选择某个选项时选择ID值。

我在用 material-ui 0.19.3v 得到一个 选择域 要在此处显示要从链接中选择的用户列表,请执行以下操作:

<SelectField
    value={this.props.the_user}
    onChange={(e, i, value) => this.props.setUser(value)}>
    <MenuItem value="" primaryText="" />
    {
        this.state.users.map(x =>
        <MenuItem
            key={`${x.id}MenuItem`}
            value={x}
            primaryText={x.name}
        />)
    }
</SelectField>

在 this.props 我得到了

the_user
users 列表 user 包含名称、ID、年龄的对象…

但我的问题是,当加载初始redux状态时,selectfield为空 用户 是一个有效的对象,我不知道哪种方法是正确的。需要建议。

1 回复 | 直到 6 年前

lellefood 6 年前

您需要使用实际值,而不是像

<SelectField
    value={this.props.the_user} //Set the_user as user's id instead of object
    onChange={(e, i, value) => this.props.setUser(value)}>
    <MenuItem value="" primaryText="" />
    {
        this.state.users.map(x =>
        <MenuItem
            key={`${x.id}MenuItem`}
            value={x.id} //here use the id so its type matches the default value supplied to Select field
            primaryText={x.name}
        />)
    }
</SelectField>