如何从API数据加载输入，以及如何使用React状态进行验证来提交？

Question

我有一个API，它提供输入类型(文本、收音机或DateTime，下拉列表)。并根据attriput_code显示输入字段或下拉输入字段。根据属性frontend_input类型，输入类型可能不同。

现在我想获得所有类型的字段，并在表单提交中更改值.

{attributes?.map(subOption => {
              switch (subOption?.frontend_input) {
                case 'text':
                  return
                  <Controller
                    name={subOption.attribute_code}
                    control={control}
                    render={({ field }) => (
                      <TextField
                        {...field}
                        className="mt-8 mb-16"
                        error={!!errors.subOption.attribute_code}
                        required
                        label="Tax Excluded Price"
                        helperText={errors?.subOption?.attribute_code?.message}

                        autoFocus
                        id={subOption.attribute_code}
                        variant="outlined"
                        fullWidth
                      />
                    )}
                  />;
                case 'select':
                  return (
                    <>
                      <Controller
                        name={subOption.attribute_code}
                        control={control}
                        render={({ field }) => (
                          <Select
                            className="mt-8 mb-16"
                            labelId="demo-simple-select-helper-label"
                            id={subOption.attribute_code}
                            value=""
                            label={subOption.default_frontend_label}
                            style={{ margin: "10px 0px" }}
                            onChange={handleChange}
                            fullWidth
                          >
                            <MenuItem key="" value="" selected >
                              {subOption?.default_frontend_label}
                            </MenuItem>
                            {subOption?.options?.map(selectOption => {
                              return (
                                <MenuItem key={selectOption?.value} value={selectOption?.value}>
                                  {selectOption?.label}
                                </MenuItem>
                              );
                            })}
                          </Select>
                        )}
                      />
                    </>
                  )
                case 'date':
                  return (
                    <>
                      <LocalizationProvider dateAdapter={AdapterDayjs}>
                        <DatePicker
                          name={subOption.attribute_code}
                          className="mt-8 mb-16"
                          label="Basic example"
                          value="2022-10-10"
                          onChange={(newValue) => {
                            setValue(newValue);
                          }}
                          renderInput={(params) => <TextField {...params} />}
                          fullWidth
                        />
                      </LocalizationProvider>
                    </>
                  )
               
                default:
                  return (
                    <><h1>not found</h1></>
                  )
              }
            })}

对于特定的输入字段类型和名称(比如watch('name'))，我们只有下面的代码。

  const { formState, watch, getValues } = methods;
  const name = watch('name');
  function handleSaveProduct() {
    console.log("Form Submit Vlaue");
    console.log(getValues());
    dispatch(saveProduct(getValues()));
  }

Answer 1

首先，需要保存在对象数组中动态创建的输入，如下所示：

   const initialStateArray = [{
            title: '', listid: 1, name: 'title'
        },
        {
            subtitle: '', listid: 2, name: 'subtitle'
        },
        {
            embed: '', listid: 3, name: 'embed'
        },
        {
            cover: '', listid: 4, name: 'cover'
        },
        {
            category: '0', listid: 5, name: 'category'
        }]

  const [formData, setFormData] = useState(initialStateArray);

在本例中，listid是我创建的自定义属性，可以用onChange方法更新值。

现在通过状态映射，在本例中是formData。因此，每次更新值时，表单都会重新复制并保持同步。

带有自定义属性的输入如下所示：

<div className={Style.inputContainer} key={3} listid={3}>
      <label htmlFor="embed">Embed Link</label>
      <input onChange={handleInputChange} type="text" name="embed" placeholder='#'  />
</div>

对于您的输入更改，请执行以下操作：

function handleInputChange(e) {
        const { name, value } = e.target;
        const listid = parseInt(e.target.parentNode.attributes.listid.value)
        
        setFormData(prevState => (
            prevState.map(input => {

                if (input.listid === listid) {
                    input[name] = value
                }
                return input
            })
        ));
        
    }

该职能的作用如下：

在自定义attributed

• Updates的输入树上获取输入更改的

• 搜索的名称和值-- formData

状态

这将取决于用于创建输入的对象的结构，但这是一个想法。

如果需要在用户交互之后添加输入，则可以创建一个函数，该函数在保持值状态的同时更新对象键。如下所示：

function handleInputAdd(info) {

        const { name, title, type } = info;

        if (type === 'gallery') {
            setFormData([...formData, { gallery: [], listid: inputId, name: name, title: title, type: type }]);

        } else {
            setFormData([...formData, { [name]: '', listid: inputId, name: name, title: title, type: type }]);
        }

    }