我正在 React 中構建一個具有許多復雜表單的應用程式，并且我正在嘗試在<form>元素上使用 onChange 事件處理程式。
<form onChange={handleChange}>
<input name="input1" />
<input name="input2" />
...
</form>
聽的常規HTML的輸入更改時，但建設時，這個偉大的工程<CustomInput>，我有麻煩的觸發的onChange <form>。
我創建了一個“隱藏的”<input>并手動調度了一個Event("change")，但是它沒有被 onChange 接收到<form>，但是，它確實適用于<select>輸入。
import { useRef } from "react";
function App() {
const inpRef = useRef();
const selRef = useRef();
function onChange(e) {
console.log(e.target.name); // Only "select" is logged
}
function dispatchChange() {
inpRef.current.dispatchEvent(new Event("change", { bubbles: true }));
selRef.current.dispatchEvent(new Event("change", { bubbles: true }));
}
return (
<>
<form onChange={onChange}>
<input ref={inpRef} name="input" />
<select ref={selRef} name="select" />
</form>
<button onClick={dispatchChange}>Trigger change</button>
</>
);
}
export default App;
為什么<select>觸發 onChange的“change”事件，而不是<input>？
uj5u.com熱心網友回復：
之所以會出現此問題，是因為輸入的“更改事件”非常特殊。它由“ChangeEventPlugin”管理。
此插件的限制之一是“更改”事件僅在輸入值實際更改時才會被調度。
要解決此問題，您必須在代碼中添加以下內容：
useEffect(() => {
inpRef.current._valueTracker.getValue = () => {
return 'fake value'
}
}, []);
并匯入“useEffect”，當然。
import { useEffect, useRef } from 'react';
所以，最后，完整的代碼將是：
import { useEffect, useRef } from 'react';
function App() {
const inpRef = useRef();
const selRef = useRef();
function onChange(e) {
console.log(e.target.name); // Only "select" is logged
}
function dispatchChange() {
inpRef.current.dispatchEvent(new Event("change", { bubbles: true }));
selRef.current.dispatchEvent(new Event("change", { bubbles: true }));
}
useEffect(() => {
inpRef.current._valueTracker.getValue = () => {
return 'fake value'
}
}, []);
return (
<>
<form onChange={onChange}>
<input ref={inpRef} name="input" />
<select ref={selRef} name="select" />
</form>
<button onClick={dispatchChange}>Trigger change</button>
</>
);
}
export default App;
我希望我已經幫助了你。祝你有個美好的一天，新年快樂！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/401758.html
標籤：javascript 反应 形式 变化中