使用 React Hooks Helper 设置多步表单的状态（链接到代码框）

Question

我正在尝试使用 react hook helper 构建注册页面。无法使用 SetForm 存储生成的 base64 字符串。也可以通过下一个和上一个来保留状态。谢谢您的回复。 项目链接：https://codesandbox.io/s/billowing-cherry-yvj90?file=/src/Second.js

MultiStepForm.js

import { useForm, useStep } from "react-hooks-helper"

const defaultData = {
    FIRST_NAME: "",
    LAST_NAME: "",
    PHOTO: "",

const steps = [
    { id: 'details' },
    { id: 'photo' },
]
const RegistrationMultiStepForm = () => {

    const [formData, setForm] = useForm(defaultData);
    const props = { formData, setForm, navigation }
    const { step, navigation } = useStep({
        steps,
        initialStep: 0
    })
    switch (step.id) {
        case 'details':
            return <Registration_First {...props} />

        case 'photo':
            return <Registration_Second {...props} />

    }

Registration_First.js

     const Registration_First = ({ formData, setForm, navigation }) => {
     const { FIRST_NAME, LAST_NAME } = formData;
       <input
        placeholder='Enter your details'
        type='text'
        name="FIRST_NAME"
        onChange={setForm}
        value={FIRST_NAME} />

     <button onClick={() => navigation.next()}

Registration_Second.js（在这里我无法设置照片的值..）。 {result} 是我试图添加到我的状态的 base64 图像字符串，即 setForm 用于分配 PHOTO 字段的值。

configuration same as Registration_First

 const Cropped = () => {

// this does not work which is the correct way 
   setForm((previousState) => {
      previousState.PHOTO = result
      return previousState
   })

//this works...wrong way
   formData.PHOTO = result;
}

                                             

我的期望”：在使用 base64 字符串更新 {result} 值时，我想调用 setForm 操作并将 {result} 的值传递给我的 PHOTO 字段。

Answer 1

看到代码沙箱后，我发现了这个钩子来自什么依赖：react-hooks-helperhttps://www.npmjs.com/package/react-hooks-helper

React Hooks Helper 应该大致像这样使用：

const [{ FIRST_NAME, PHOTO }, setValue] = useForm()
...
<input name='FIRST_NAME' value={FIRST_NAME} onChange={setValue} />

在您的情况下，当用户完成画布 ui 内容时，您使用 onCrop 事件将 PHOTO 的值设置为数据 url。

cosnt Cropped = () => {
  formData.PHOTO = result
}

这是不正确的并且是反模式。状态应该是不可变的，不能直接改变。这就是为什么状态直到下一次在其他地方改变状态时才显示更新的原因。您应该改用 setter，以便 React 可以自行更新。

回答：因为我们使用的是 react-hook-helpers 库，所以我们需要传入它所期望的数据。我们不能传入一个字符串，我们必须传入看起来像 onChange 参数对象形式的东西。

const Cropped = () => {
  setForm({
    target: {
      name: 'PHOTO', // form element
      value: result // the data/url
    }
  })
}

执行此操作后，您应该会看到状态将自动更新。 你可以在这里看到库代码在做什么：https://github.com/revelcw/react-hooks-helper/blob/develop/src/useForm.js

注意：对于它的价值，他们已经 2 年没有更新图书馆了。但它看起来像一个不错的库，有文档，什么不是。所以这很好。