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

问题描述

我使用的是用 Field react-final-form 包裹的 material-ui-chip-input。

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

筹码是表示输入、属性或 行动。

material ui docs

正如你所看到的，我在这里使用了 2 个状态

1. 反应 useStates
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>
  )

material-ui-chip-input

react-final-form

see codesandbox demo

解决方法

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

要点：

• 不要复制状态，让 react final form 为你处理状态
• 将一个空数组作为初始状态传递给 FORM，不要将 defaultValues 传递给 Field。
• 根据 material-ui-chip-input 包，如果在受控模式下使用，您需要使用 onAdd，我们这样做，因为我们让 react final form 处理状态。
• 将 value 道具添加到 Chipinput。
• 出于美观的原因：实际上不要在 <Form /> 中使用 render-prop - 而是使用函数式子组件。

代码：

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.1)",padding: "20px"
            }}
          >
            {JSON.stringify(values,2)}
          </pre>
        </form>
      )}
    </Form>
  );
}