react-final-form 多选答案

【问题标题】：react-final-form with multiple selectreact-final-form 多选
【发布时间】：2019-06-11 10:06:20
【问题描述】：

我正在尝试通过 Material-UI 使用 react-final-form 构建一个具有多值选择组件的表单。不知何故，使用单个选择，我可以获得价值，但使用多个，它不会。不知何故，react-final-form 似乎在内部拥有自己的价值。

这是 Material-UI 中用于构建多个 Select 的指导链接：

https://codesandbox.io/s/sr6pf

我试图在我的表单中复制第一个示例（不使用反应钩子），但我仍然错过了什么？

https://codesandbox.io/embed/react-final-form-material-ui-example-jfmoe

我应该在我的组件中添加什么来使它工作？

谢谢，

【问题讨论】：

也许在 final-form-material-ui 上打开一个问题？ github.com/Deadly0/final-form-material-ui/issues/new
@ErikR。感谢提醒，我确实为自己的问题找到了解决方案，这很奇怪，想知道我是否应该添加自己的答案
是的，我已经记不清有多少次有人回答他们自己的问题了。这样做，因为有人会遇到同样的问题。

标签： reactjs select react-final-form

【解决方案1】：

由于某些原因，我设法为自己的问题找到了解决方案。正确的答案是创建一个自定义的 MultiSelect 组件，而不是重用来自 final-form-material-ui 的组件。

注意：我尝试使用 final-form-material-ui 中的 <Select /> ，但将 multiple 属性添加到组件不会传递给，这很奇怪。

所以，我的自定义组件看起来像这样，几乎类似于添加了 multiple 属性的 their github 中的组件。

import React from 'react';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';

function SelectMulti({
  input: { name, value, onChange, ...restInput },
  meta,
  label,
  formControlProps,
  ...rest
}) {
  const showError =
    ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) &&
    meta.touched;

  return (
    <FormControl {...formControlProps} error={showError}>
      <InputLabel htmlFor={name} shrink>
        {label}
      </InputLabel>
      <Select
        {...rest}
        multiple
        name={name}
        value={value}
        onChange={onChange}
        inputProps={restInput}
      />
      {showError && (
        <FormHelperText>{meta.error || meta.submitError}</FormHelperText>
      )}
    </FormControl>
  );
}

SelectMulti.propTypes = {};

export default SelectMulti;

希望这对将来的某人有所帮助

【讨论】：

这对我来说有帮助，只是添加了一个 - 将 value={value} 更改为 value={value || []}，否则如果值为空字符串，则会引发异常

【解决方案2】：

我可以通过设置fomat 来解决这个问题

<Field
 name="concepts"
 component={Select}
 displayEmpty={trie}
 multiple={true}
 value={[]}
 format={value => value || []}
 />

根据https://github.com/erikras/redux-form-material-ui/issues/212#issuecomment-358376925

【讨论】：