Question

我在表单中使用了带有useFormik的钩子。我以前曾处理过这种情况，但API发生了变化，无法与useFormik一起使用。当我的值是数组['a'，'b'，'c'....]并且输入一个接一个的时候，我的情况很简单。我想有可能删除给定的输入（以及数组中的项）以及添加新的...。如何实现？到目前为止，我已经尝试过：

在组件内部，我只是按数组中的值进行映射：

{values.arrayValues.map((value, index) => (
    <div key={`value_no_${index}`}>
      <FormInput
        label={value}
        name={index}
        onChange={onChange}
        value={value}
      />
            <button
                onClick={() => removeCustomField(index)}
              >
                remove
            </button>
    </div>
  ))}

  const onChange = useCallback(event => {
    const { name, value } = event.target;
    const updatedValues = values.arrayValues;
    updatedValues[name] = value;
    setFieldValue('arrayValues', updatedValues);
  }, []);

values.arrayValues是我的Formik值数组，这是我尝试做的onChange。要删除和添加，我确实是这样的：

  const removeField = useCallback((index: number) => {
    setFieldValue('arrayValues', values.customFieldsValues.filter((_, i) => i !== index));
  }, []);

  const addField = useCallback(() => {
    setFieldValue('arrayValues', [...values.arrayValues, '']);
  }, []);

不幸的是，这里没有任何正常工作。在带有输入的组件中，我只使用map，而index是输入的名称。

useFormik中的Formik-处理数组值

0 个答案: