0

我在我的项目中使用 ReactQuill。使用 react-quill 的漂亮新手。我在我的项目中使用 react 和 nextjs。所以我动态导入了 react-quill 以防止服务器端渲染：-

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

在我的组件中，我使用的是 ReactQuill，没有任何额外的设置。

const MyComponent = () => {
    //handleSingleChange method is defined here
    //formData here
    //and any other methods, states
    return (
        <>
            <ReactQuill
                value={formData?.company_page?.about || ""}
                onChange={(e) => handleSingleChange("about", e)}
            />
        </>
    )
}

我发现了几个场景：

  1. 如果我使用 defaultValue 该字段不会填充来自 api 的数据（这是一个编辑页面）
  2. 如果我使用值，它会用来自 api 的数据填充该字段，但为此我必须使用它 || （或）运算符（否则会引发 delta 对象错误）。
  3. 但是使用值不允许我在该字段中输入任何内容。它失去了焦点。
  4. 如果我省略 value 它让我输入。但我必须显示数据。

如果有人可以帮助解决这个问题，那就太好了。

4

1 回答 1

0

在方法handleSingleChange 中，我试图更新到状态。

const handleSingleChange = (name, value) => {
    setCompanyPage({...companyPage, [name]: value})
    setFormData({...formData, company_page:companyPage})
};

当我试图立即更新 companyPage 状态时，它不起作用，bCoz 做出反应，状态不会立即更新。

所以我不得不使用一个变量来覆盖 companyPage 状态，然后在 formData 中更新它。见下面的方法。

const handleQuillChange = (name, value) => {
    const updatedCompanyPage = {...companyPage, [name]: value};
    setFormData({...formData, company_page: updatedCompanyPage})
}
于 2022-01-07T12:56:18.653 回答