redux 如何从API数据加载输入并从React状态提交验证？

pdtvr36n 于 2022-11-30 发布在 React

关注(0)|答案(1)|浏览(138)

我有一个API，提供输入类型（文本，单选，或日期时间，下拉）。我们显示的输入字段或下拉输入字段根据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()));
  }

redux

来源：https://stackoverflow.com/questions/74502584/how-do-i-load-input-from-api-data-and-submit-with-validation-from-react-state

1条答案

按热度按时间

3j86kqsm1#

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

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是自定义属性i，使其能够使用onChange方法更新值。
现在，您将Map通过状态，在本例中为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
            })
        ));
        
    }

该函数执行以下操作：

抓取输入更改的名称和值
在输入树中搜索自定义属性
更新表单数据的状态

这将根据用于创建输入的对象的结构而变化，但这就是想法。
如果你需要在用户交互之后添加输入，你可以创建一个函数来更新对象键，同时保留值的状态。

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 }]);
        }

    }

赞(0）回复(0）举报 2022-11-30

我来回答

redux 如何从API数据加载输入并从React状态提交验证？

1条答案

相关问题

热门标签

最新问答