Select Select字段中的单个选项 redux-form-material-ui

Question

我的 redux 应用程序中有一些表单。我也使用 redux-form-material-ui。我希望将只有一个选项的 SelectFields 默认设置为该选项。只有在构造表单组件时设置initialValues才能做到吗？

Answer 1

令人惊讶的是答案似乎是 "No"。至少看起来不像传个道具那么简单

Material-ui（原始版本，不是 Redux 形式的变体）doesn't support the defaultValue option for SelectField. I also found a similar thread for Redux-form.

如果您始终将 SelectField 选项的数据放在一个数组中，您可能仍然可以解决它。然后，您可能会拥有将该数组转换为 MenuItem 数组的函数。

// example option data
const optionDataArray = [{ value: "first option", key: 0 }, { value: "second option", key: 1 }];
const toMenuItem = menuData =>
     (<MenuItem value={value} key={key} primaryText={ value } />)
  );

然后你可以像这样渲染它们

<SelectField value={ 
    optionDataArray.length === 1 ? 
       optionDataArray[0].value :
       null
 } >
  { optionDataArray.map(toMenuItem) } 
</SelectField>

我没试过这个，但希望这能使单项 SelectFields 控制组件具有预选输入。我希望 null 值会被解释为好像我们根本没有提供任何东西。

但是如果第二个 assumption/hope 不是真的，那么你也许可以创建一个像这样的函数：

const getSelectFieldValueProp = allOptionData => {
  if(allOptionData.length == 1) {
    return { value: allOptionData[0].value }
  } else {
    return {};
  }
}

并像

一样使用它

<SelectField {...getSelectFieldValueProp(optionDataArray) } >
  { optionDataArray.map(toMenuItem) } 
</SelectField>

这样只有一项 SelectFields 应该得到 value 属性集。

Answer 2

解决方法非常简单。您只需正确遵循 redux-form 流程并从 redux-form.

调用 Field 定义的 onChange

import React from 'react';

import { SelectField as MUISelectField } from "redux-form-material-ui";

export class SelectField extends React.Component {
  constructor(props) {
    super(props);

    this.chooseSingleOption();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.children !== this.props.children) {
      this.chooseSingleOption();
    }
  }

  chooseSingleOption() {
    const children = React.Children.toArray(this.props.children);
    if (children.length === 1) {
      this.props.input.onChange(children[0].props.value);
    }
  }

  render() {
    return (
      <MUISelectField {...this.props}/>
    )
  }
}

Select Select字段中的单个选项 redux-form-material-ui

Select single option in SelectField redux-form-material-ui

reactjs

redux

react-redux-form