具有多个选择的“最终反应形式”

时间:2019-06-11 10:06:20

标签: reactjs select react-final-form

我正在尝试通过Material-UI使用react-final-form构建具有多个值的Select组件的表单。以某种方式使用单个“选择”,我可以获得值,但是使用多个,则没有。某种程度上,似乎React-final-form在内部保持着自己的价值。

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

https://codesandbox.io/s/sr6pf

我尝试在表单中复制第一个示例(不使用react钩子),但我仍然错过了什么?

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

我应该在我的组件中添加些什么以使其起作用?

谢谢

2 个答案:

答案 0 :(得分:0)

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

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

因此,我的自定义组件看起来像这样,几乎类似于their github中添加了multiple道具的组件。

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;

希望这对以后的人有帮助

答案 1 :(得分:0)

我可以这样设置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