如何 change/format 从 react-final-form 输入的 props 中的值

Question

在编辑表单中，我的 API returns 一个 ID 数组 [ 1, 2 ] 用于在输入中显示广告商，我使用 react-select 作为自动完成但 react-select 需要：[{label: 'foo', value: 1}, {label: 'bar', value: 2}].

我通过提取获取组件中的标签，我想知道如何更改 react-final-form 中的值以获得正确的格式。

这是我的编辑表单：

const AgenciesInputs = ({
  getMany,
  record,
  sourceAdvertisers,
  sourceCreatedBy,
  sourceIsActive,
  sourceName,
  translate,
}) => {
  const [formatedAdvertisers, setFormatedAdvertisers] = useState([]);

  useEffect(() => {
    const { advertisers } = record;

    getMany(ADVERTISERS, advertisers, ({ payload: { data } }) =>
      setFormatedAdvertisers(data.map(({ id, name }) => ({ value: id, label: name }))),
    );
  }, []);

  console.log(formatedAdvertisers);

  return (
    <Root id="SLM_agenciesInputs">
      <TextInput autoFocus label="agencies_name" source={sourceName} validate={required()} />
      {!isNilOrEmpty(record) && (
        <TextInput
          disabled
          format={record => (record ? `${record.lastname} ${record.firstname}` : '')}
          label="agencies_createdBy"
          source={sourceCreatedBy}
        />
      )}
      <BooleanInput defaultValue label="agencies_isActive" source={sourceIsActive} />

      <Field
        component={CustomAutoCompleteInput}
        id="SLM_avertisersInput"
        minLength={1}
        name={sourceAdvertisers}
        placeholder={translate('agencies_advertisers')}
        url={sourceAdvertisers}
        validate={required()}
        isMulti
      />
    </Root>
  );
};


export default AgenciesInputs;

Answer 1

如果你传递一个 options 道具，它会像 placeholder 和 isMulti 一样被传递给 CustomAutoCompleteInput。好像你可以通过 options={formatedAdvertisers}.

如何 change/format 从 react-final-form 输入的 props 中的值

How to change/format the value in props input from react-final-form

reactjs

react-admin

react-final-form