javascript - Redux-form 不读取 SelectField 的值

Question

我有一个非常简单的表单，包含 react 和 redux-form。我想要实现的是获取表单的所有字段值，并使用 jQuery ajax 将它们发送到我的 RESTful api。

现在我唯一的问题是 redux-form 显然没有读取 SelectField 的值。例如，当我查看 redux-devTools 时，除了 SelectFields，所有其他输入都在那里。我搜索了很多并阅读了整个文档，我意识到 SelectField 在 redux-form 中有点棘手，但我似乎无法让它工作。如何使用 redux-form v5.3.1 获取 SelectFields 值？

我正在使用:

• Material-ui v0.15.4

• Redux-form v5.3.1

• React v15.3.0

编辑 1:

我尝试了不同的方法:

首先:在SelectField上使用onChange

                        <SelectField
                            ref="customerGroup"
                            {...customerGroup}
                            fullWidth
                            floatingLabelText="customer group"
                            value={this.state.selectedCustomerGroup}
                            maxHeight={200}
                            onChange={(e,s,value)=>setState({selectedCustomerGroup: value}}
                        >
                            {groups}
                        </SelectField>

第二个:在SelectField 的子级上使用setState

                        for(let group of groupsArray){
        groups.push(<MenuItem className={style.menuItem} value={group.id} key={group.id} primaryText={group.name} onTouchTap={()=>this.setState({selectedCustomerGroup: group.id})}/>);
    }
                        <SelectField
                            ref="customerGroup"
                            {...customerGroup}
                            fullWidth
                            floatingLabelText="customer group"
                            value={this.state.selectedCustomerGroup}
                            maxHeight={200}
                            {groups}
                        </SelectField>

我的构造函数:

constructor(props){
    super(props);
    this.state = {
        selectedCustomerGroup: 1
    };
}

这里你可以看到除了我的 customerGroup 这是我的 SelectField

编辑 16/27/8:

由于这个确切的问题，我打算放弃 redux-form。

Answer 1

我需要说的是，您不需要将值保存到本地状态中。这只是一个建议。

其次，检查 Redux-Form 最佳实践。检查来自 github 等的开源项目。如果自定义组件没有给您带来任何优势，请保持冷静并使用最简单的，也许是纯 html 标签。

第三，使用fetch api代替jquery xhr等

注意 setState 和 refs!

我的答案是(作为你的编码模式)

<SelectField
                        ref="customerGroup"
                        {...customerGroup}
                        fullWidth
                        floatingLabelText="customer group"
                        value={this.state.selectedCustomerGroup}
                        maxHeight={200}
                        onChange={(e,s,value)=>{customerGroup.onChange(e);setState({selectedCustomerGroup: value})}}
                    >
                        {groups}
                    </SelectField>