时间戳

首页 > 解决方案 > react-final-form 多选

reactjs - react-final-form 多选

问题描述

我正在尝试通过 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

我应该在我的组件中添加什么来完成这项工作？

谢谢，

标签： reactjsselectreact-final-form

解决方案

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

注意：我尝试使用<Select />fromfinal-form-material-ui但向multiple组件添加 prop 不会传递给 ，这很奇怪。

所以，我的自定义组件看起来像这样，几乎与他们的 github中添加了multipleprop 的组件相似。

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;

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

推荐阅读