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

Question

我使用的是 material-ui-chip-input 封装了 Field react-final-form。

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

Chips are compact elements that represent an input, attribute, or action.

material ui docs

如你所见，我在这里使用了 2 个状态

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

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

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

它不限制我的筹码。
我的 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

Answer 1

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

要点：

不要复制状态，让 React 最终形式为您处理状态
将空数组作为初始状态传递给 FORM，不要将 defaultValues 传递给 Field。
根据 material-ui-chip-input 包，如果在受控模式下使用，您需要使用 onAdd，我们这样做，因为我们让反应最终形式处理状态。
将 value 属性添加到 Chipinput。
出于美观原因：实际上不要在内部使用 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>
  );
}

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

How properly connect react-final-form and material-ui-chip-input?

javascript

material-ui

react-final-form