使用反应挂钩形式删除不受控制的 "ChipInput" 中的标签

Question

我正在使用 react-hook-form 来处理表单值，它适用于所有其他输入类型，如 TextFeild，来自 material 的 Select 但面临“material-ui-chip-input”作为添加标签工作正常但无法在单击十字按钮或点击退格键时删除标签。我长期以来一直在努力解决这个问题。任何人都请帮忙。

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import { Controller } from "react-hook-form";

import ChipInput from "material-ui-chip-input";

const ReactHookFormChips = ({
  name,
  label,
  control,
  defaultValue,
  children,
  rules,
  error,
  chipsError,
  ...props
}) => {
  const labelId = `${name}-label`;
  return (
    <FormControl {...props}>
      <Controller
        as={
          <ChipInput
            label={label}
            helperText={chipsError}
            error={error}
          />
        }
        name={name}
        control={control}
        defaultValue={defaultValue}
        rules={rules}
      />
    </FormControl>
  );
};
export default ReactHookFormChips;

像这样调用这个组件

<ReactHookFormChips
  id="levelLabel"
  name="tags"
  label="Select Tags"
  control={control}
  defaultValue={[]}
  margin="normal"
  error={!!errors?.tags}
  rules={{ required: true }}
  chipsError={errors?.tags && "Tag is required."}
/>

Answer 1

我使用 render prop 修复了它。

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import { Controller } from "react-hook-form";

import ChipInput from "material-ui-chip-input";

const ReactHookFormChips = ({
  name,
  label,
  control,
  defaultValue,
  children,
  rules,
  error,
  chipsError,
  ...props
}) => {
  const labelId = `${name}-label`;
  return (
    <FormControl {...props}>
      <Controller
        render={({ onChange, onBlur, value }) =>
          <ChipInput
            onChange={onChange}
            label={label}
            helperText={chipsError}
            error={error}
          />
        }
        name={name}
        control={control}
        defaultValue={defaultValue}
        rules={rules}
      />
    </FormControl>
  );
};
export default ReactHookFormChips;

使用反应挂钩形式删除不受控制的 "ChipInput" 中的标签

Delete tag in uncontrolled "ChipInput" using react hook form

javascript

reactjs

react-hook-form