我在 onChange 模式下使用react-hook-form。我根据验证状态启用/禁用提交按钮。它工作得很好。
现在我必须切换到 onBlur 模式。当前的解决方案不再按预期工作。当所有字段都有效时，我希望提交按钮立即启用。现在只有当我单击最后一个字段时它才启用。我应该在代码中更改哪些内容才能按预期工作？
const { register, errors, handleSubmit, formState } = useForm({
mode: "onChange" // I want to change it to onBlur
});
const { isValid } = formState;
...
<input disabled={!isValid} type="submit" />
这是一个示例：https://codesandbox.io/s/react-hook-form-disable-submit-button-onblur-0293x ?file=/src/index.js
更新解决方案： NearHuscarl 的回答有助于找到解决方案。我必须停留在 onChange 模式并自己处理错误消息的显示。仅当该字段位于 formState 的 TouchFields 对象中时，我才显示错误。
const form = useForm({
mode: "onChange" // I want to change it to onBlur
});
const { register, handleSubmit, formState } = form;
const { isValid, touchedFields, errors } = formState; …我在玩react-draft-wysiwyg编辑器。我进步很好。但是现在我卡住了如何显示编辑器的输出。
例如，假设body是所见即所得编辑器的输出：
function ShowHtml(props) {
let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
return (
<div>
{body}
</div>
)
}
现在，输出将是完全相同的html，其中显示的标签没有经过格式化。
<p>Sample text with <strong>bold</strong> and <em>italic</em></p>
我想要这样的事情：
带有粗体和斜体的示例文本
在jQuery中，我只是设置div标签的html属性。但是我不知道如何在React中正确地做到这一点。我可以像在jQuery中那样仅获取对div的引用并以某种方式对其进行更新吗？它与虚拟Dom一起使用吗？
我想重新实现一个树组件以提高其性能。我使用了 react-window 中的 FixedSizeList。它的工作比较好。它甚至可以处理 100,000 个树节点。
我的问题是，我想为树节点的小开口三角形设置动画。以下css负责动画：
.tree-branch::after {
content: '';
display: block;
width: 0;
height: 0;
margin-top: 1px;
margin-left: 23px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid rgba(0, 0, 0, 0.7);
opacity: 0.7;
position: absolute;
top: 0;
left: -36px;
transform: rotate(90deg);
animation-duration: 0.3s;
}
.tree-item-closed::after {
transform: rotate(0deg);
}动画不起作用。因为在每次打开和关闭所有列表元素 div 时都会重新渲染。然后我尝试为列表添加 itemKey 属性以帮助 React 重用 div。
<List
className="List"
height={height}
itemCount={flattenedData.length}
itemSize={32}
width={width}
itemKey={index => flattenedData[index].id} // key defined
>
{Row}
</List>
它也不起作用。div 不会更新，而是重新渲染整个 div。这个问题有合适的解决方案吗？如何防止重新渲染？ …