react-admin 中的芯片输入答案

【问题标题】：Chip input in react-adminreact-admin 中的芯片输入
【发布时间】：2019-01-28 10:12:39
【问题描述】：

如何在 react-admin 中使用 material-ui-chip-input ？

我尝试编写这样的代码，但结果没有发送到服务器。

import React from 'react';
import { Field } from 'redux-form';
import ChipInput from 'material-ui-chip-input';

const renderChipInput = ({ input, meta: { touched, error } }) => (
        <ChipInput {...input}/>

);
const Chip = () => <Field name="tags" component={renderChipInput} />
export default Chip;

【问题讨论】：

添加更多代码（您正在使用它的视图）

标签： react-admin

【解决方案1】：

它的工作代码

import React from 'react';
import { Field } from 'redux-form';
import ChipInput from 'material-ui-chip-input';

const renderChipInput = ({ input, meta: { touched, error } }) => (
        <ChipInput {...input}
                   value = { input.value || []}
                   onAdd={(addedChip) => {
                       let values = input.value || [];
                       values = values.slice();
                       values.push(addedChip);
                       input.onChange(values);
                   }}
                   onDelete={(deletedChip) => {
                       let values = input.value || [];
                       values = values.filter(v => v !== deletedChip);
                       input.onChange(values);
                   }}
                   onBlur={() => input.onBlur()}
        />
);
const Chip = () => <Field name="tags" component={renderChipInput} />
export default Chip;

【讨论】：

不错！不要忘记将您的答案标记为“已解决”。

【解决方案2】：

下面是useField 和react-admin@^3.0.0 的示例实现：

import React from 'react';
import { useInput } from 'react-admin';
import RawChipInput from 'material-ui-chip-input';

export function ChipInput(props) {
  const {
    input: { value, onChange, ...rest },
    meta: { touched, error },
    isRequired,
  } = useInput(props);

  if (value && !Array.isArray(value)) {
    throw new Error(
      `ChipInput requires an array value but received: ${JSON.stringify(
        value,
      )}`,
    );
  }

  return (
    <RawChipInput
      value={value || []}
      label={props.label}
      onAdd={(newChip) => onChange((value || []).concat(newChip))}
      onDelete={(deletedChip) =>
        onChange((value || []).filter((item) => item !== deletedChip))
      }
      error={!!(touched && error)}
      helperText={touched && error}
      required={isRequired}
      {...rest}
    />
  );
}

有关官方文档中自定义输入的更多信息：https://marmelab.com/react-admin/Inputs.html#the-useinput-hook

【讨论】：