如何在不重新渲染组件的情况下在表单内设置状态

Question

我有一个表单，我想在其中设置状态（例如 setEducation）来自输入的传入值。我使用 onChange，但这会导致每次我对输入字段进行更改时呈现组件。解决问题的正确方法是什么？

<form id="loginform" onSubmit={onBecomeDoctorRequestHandler} >
                                <div className="form-group mb-3">
                                    <label>Education</label>
                                    <input
                                        type="text"
                                        className="form-control"
                                        required
  this onChange causes the              placeholder="Harvard"
  component to be rendered              onChange={(event) => setEducation(event.target.value.trim())}
                                    />
                                    <small className="text-danger form-text">
                                        {educationError}
                                    </small>
                                </div>

Answer 1

As-is 当任何表单元素发生变化时，您的所有表单元素都将 re-render 因为 onClick 的“值”是每次组件运行（呈现）时的新函数。

要解决此问题，请将 onClick 函数包装在 useCallback 中。 useCallback 将在渲染过程中保留函数的“值”，因此只有需要 re-rendered 的元素才会被编辑。

如何在不重新渲染组件的情况下在表单内设置状态

How to set a state inside form without re-render component

forms

state

render

reactjs