[英]Why Editor field not rendering recent data in react-hook-form
我在模式弹出窗口中使用反应钩子形式并面临问题以编辑形式呈现 tinymce 编辑器内容。 它在第一次打开弹出窗口时工作正常,但在关闭该弹出窗口并打开其他记录时呈现旧数据。
这是我的代码:
import TextEditor from '../utils/Editor';
const EditData = props => {
const uuid = uuidv4();
const [templateData, setSubmittedTemplate] = useState({});
const [formData, setFormData] = useState({
subject: '',
content: ''
});
const { subject, content} = formData;
const {
register,
handleSubmit,
control,
errors,
reset,
setValue,
getValues,
formState: { isSubmitSuccessful }
} = useForm({ resolver: yupResolver(schema), defaultValues: formData});
const onUpdateData = async(values) => {
//api to update
};
useEffect(() => {
if(props.temp_id){
api.get(`/api/data/${props.temp_id}`)
.then(response => {
setFormData(response.data);
setValue('subject',response.data.subject);
setValue('content',response.data.content);
});
}
}, [props.temp_id, reset]);
return (
<Modal show={props.modalState} onHide={() => props.onHide('editData')}>
<Form onSubmit={handleSubmit(onUpdateData)}>
<Modal.Header closeButton>
<div>
<Modal.Title>Edit</Modal.Title>
</div>
</Modal.Header>
<Modal.Body>
<Form.Row>
<Form.Group as={Col} controlId="subject">
<Form.Label className="floating-label">Subject</Form.Label>
<Form.Control type="text" name="subject" className="custom_input" ref={register}></Form.Control>
{errors.subject && <label className="error">{errors.subject?.message}</label>}
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} controlId="content">
<Form.Label className="floating-label">Content</Form.Label>
<Controller
control={control}
name="content"
defaultValue={formData.content}
render={({ onChange, value}) => (
<TextEditor onChange={onChange} initialvalue={value} register={register} />
)}
/>
{errors.content && <label className="error">{errors.content?.message}</label>}
</Form.Group>
</Form.Row>
</Modal.Body>
<Modal.Footer>
<Button varient="primary" className="pl-4 pr-4" type="submit">Update</Button>
</Modal.Footer>
</Form>
</Modal>
);
}
export default EditData;
TextEditor 有 tinyMCE 配置代码:
const TextEditor = props => {
return (
<Editor
className="custom_input"
ref={props.register}
initialValue={props.initialvalue}
init={{
height: 300,
menubar: false,
statusbar:false,
//inline:true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code'
],
toolbar:
'undo redo | formatselect | bold italic | placeholder | forecolor backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | code | removeformat',
setup: function (editor) {
//
}
}}
onEditorChange={props.onChange}
/>
)
}
export default TextEditor;
请让我知道缺少什么或磨损的东西,以便编辑器不会更新最近的数据,而其他表单字段(如主题)工作正常。 谢谢。
您需要添加两个更改,第一个是您需要将 onChange 包装在回调中,其次您应该将来自 Controller 组件的 value 道具作为编辑器中的 value 道具,而不是 initialValue 道具。
const TextEditor = props => {
const handleEditorChange = (editor) => props.onChange(editor);
return (
<Editor
className="custom_input"
value={props.initialvalue}
init={{
height: 300,
menubar: false,
statusbar:false,
//inline:true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code'
],
toolbar:
'undo redo | formatselect | bold italic | placeholder | forecolor backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | code | removeformat',
setup: function (editor) {
//
}
}}
onEditorChange={handleEditorChange}
/>
)
}
通过这样做,您可以在 useEffect 中使用 react hook 形式的 setValue function 来设置编辑器内容。 您也不需要将寄存器传递给 TextEditor 组件,因为 controller 正在处理您的表单 state 更改。
这是一个工作沙箱,向您展示它是如何工作的: https://codesandbox.io/s/tinymce-react-demo-forked-gg7o8?file=/src/index.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.