如何在向導中編輯表單並為向導保存其 state

Question

我正在用 React js 制作一個向導。 我已經使用 get api 調用以表格形式填充數據。 現在我想編輯表單中的數據，在應用程序流中保留它的 state。

Answer 1

Redux-Form 允許您將自定義道具傳遞到Field中，因此您可以使用它作為將檢索到的值從 api 傳遞到渲染組件的方法。

根據您的示例鏈接，您可以執行以下操作：

修改 renderField 以接受自定義道具value （或您想要的任何其他名稱）並將其傳遞給輸入值。

const renderField = ({
  input,
  label,
  type,
  value,
  meta: { touched, error }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} value={input.value ? 
            input.value : value} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

定義 state 變量並更改處理程序：

const [email, setEmail] = useState("");

const handleChange = e => {
    setEmail(e.target.value);
  };

您的字段的初始值（在此示例中為“電子郵件”）可以從 api 檢索如下：

 useEffect(() => {
    /* your api call to fetch data */
    fetch(....)
    .then(res => setEmail(res.data));
  }, []);

然后在您的字段中設置道具並設置 onChange 處理程序

 <Field
        name="email"
        type="email"
        component={renderField}
        label="Email"
        props={{ value: email }}
        onChange={handleChange}
      />

這是一個工作示例： https://codesandbox.io/s/redux-form-wizard-example-7v3iy?file=/WizardFormSecondPage.js