javascript - 如何正确连接 react-final-form 和 material-ui-chip-input？

Question

我正在使用用 Field react-final-form 包装的 material-ui-chip-input。

我只想将“CHIPS”限制为 5。

芯片是表示输入、属性或动作的紧凑元素。

材料用户界面文档

如您所见，我在这里使用了两种状态

1. 反应使用状态
2. react-final-form 内部状态

这是多余的，因为 react-final-form 在内部处理了状态，但我无法正常工作，我只是在展示我到目前为止所做的事情。

我的实现基本上有两个问题。

1. 它不会限制我的筹码。
2. 我的 react-final-form 字段值 - 单击 DeleteChip 时不更新

import ChipInput from 'material-ui-chip-input'
import { Field } from 'react-final-form'

const [state, setState] = useState([])

const AddChip = useCallback(
    (chip) => {
        if (state.length + 1 <= 5) {
        setState((prev) => ([...prev.tags, chip]))
        }
    },
    [setState, state.length]
)

const DeleteChip = useCallback(
    (chip) => {
        setState((prev) => (...prev.state.filter((p) => p !== chip)]
        }))
    },
    [setState]
)

  return (
    <Field name="states" validate={isRequired} >
          {({ input: { value, onChange, ...rest }, meta }) => {
     <ChipInput
        defaultValue={Array.isArray(value) ? value : []} // check value first because material-ui-chip-input require an array, by default react-final-form value is empty string
        onChange={(event) => {  // uncontrolled 
            AddChip(event)
            onChange(event)
            // I tried below code but same result not working
            // if (state.length + 1 <= 5) {
            //  onChange(event)
            // }
        }}
        onDelete={DeleteChip} 
       />
      }}
    </Field>
  )

材料UI芯片输入

反应最终形式

见代码沙盒演示

Answer 1

这是我的看法： https ://codesandbox.io/s/proud-water-xp2y1?file=/src/App.js

关键点：

• 不要复制状态，让 react final 表单为你处理状态
• 将一个空数组作为初始状态传递给 FORM，不要将 defaultValues 传递给 Field。
• 根据在受控模式下使用时material-ui-chip-input需要使用的包onAdd，我们这样做，因为我们让反应最终形式处理状态。
• 将value道具添加到芯片输入。
• 出于美观的原因：实际上不要在内部使用 render-prop <Form />- 而是使用功能性子组件。

代码：

import ChipInput from "material-ui-chip-input";
import { Form, Field } from "react-final-form";

export default function App() {
  return (
    <Form
      initialValues={{
        states: []
      }}
      onSubmit={() => console.log("submitted")}
    >
      {({ values, onSubmit }) => (
        <form onSubmit={onSubmit}>
          <Field name="states">
            {({ input: { value, onChange } }) => (
              <ChipInput
                value={value}
                alwaysShowPlaceholder={true}
                placeholder="type states here"
                onAdd={(newVal) => {
                  if (value.length >= 5) return;
                  const newArr = [...value, newVal];
                  onChange(newArr);
                }}
                onDelete={(deletedVal) => {
                  const newArr = value.filter((state) => state !== deletedVal);
                  onChange(newArr);
                }}
              />
            )}
          </Field>
          <p>react useStates</p>

          <p>react-final-form values</p>
          <pre
            style={{
              backgroundColor: "rgba(0,0,0,0.1)",
              padding: "20px"
            }}
          >
            {JSON.stringify(values, 0, 2)}
          </pre>
        </form>
      )}
    </Form>
  );
}