我試圖onChange通過呼叫dispatchEvent傳遞給 textarea 的 ref 來觸發 textarea。
文本區域：
<textarea
onChange={handleTextAreaChange}
className={`${classes['text-input']}${
error && touched ? ` ${classes.error}` : ''
}`}
ref={textAreaRef as MutableRefObject<HTMLTextAreaElement>}
rows={numberOfRows}
cols={numberOfCols}
onBlur={onBlur}
id={id}
value={content}
></textarea>
觸發事件的代碼：
const changeEvent = new InputEvent('change', { bubbles: true });
textAreaRef.current?.dispatchEvent(changeEvent);
我已經嘗試了這兩個input和change作為事件使用的事件型別，但都沒有被onChange. 我從除錯和我textAreaRef.current定義的代碼的行為中都知道，所以這不可能是導致onChange不被呼叫的原因。
為什么我正在調度的事件沒有被捕獲onChange？
uj5u.com熱心網友回復：
根據評論，實作您想要的正確方法不是觸發事件而是操縱Formik商店。嘗試通過以編程方式呼叫事件并使用元素 ref 進行手動 DOM 呼叫來實作這一點是非常不透明的，這通常被視為最后的絕望逃生艙口。
如果您希望根據其他操作設定值，只需 setFieldValue從 formik 呼叫。您可以從背景關系中獲取它（或渲染道具，或者useForm如果您這樣做而不是<Formik>- 有很多方法）：
更改yourFieldName此欄位的 formik 名稱，表示它在狀態中的位置。當然，你需要 impl getBoldText。
import { useFormikContext } from 'formik'
// ...
const { values, setFieldValue } = useFormikContext()
// ...
<button onClick={() => setFieldValue('yourFieldName', getBoldText(values.yourFieldName))}>Bold text</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/514806.html
標籤：反应事件