function CheckoutForm({ onSubmit }) {
const [shippingName, setShippingName] = useState("");
function handleChange(func, e) {
return function () {
return func.call(null, e.target.value);
};
}
return (
<form>
<div className="field">
<label htmlFor="shipping-username">??</label>
<input
id="shipping-username"
type="text"
name="shipping-username"
autoComplete="off"
value={shippingName}
// onChange={(e) => setShippingName(e.target.value)} <--- ORIGINAL METHOD
onChange={handleChange(setShippingName(e.target.value), e)} <--- MY QUESTION
/>
</div>
</form>
)
}
在制作一個簡單的輸入欄位時，我很好奇是否可以創建一個更高階的 handleChange 函式并將其重用于其他輸入。我知道使用計算屬性名稱有更好的方法，但只是出于好奇。
我從上面的代碼中得到的錯誤訊息e是未定義的，我被困在這里。歡迎任何建議。
uj5u.com熱心網友回復：
當您像這樣定義 onChange 處理程式時：
onChange={handleChange(setShippingName(e.target.value), e)}
您將此 handleChange 呼叫的回傳值分配為 handler。因此，您必須將自己的值傳遞給 handleChange，因為它不會在事件期間被呼叫——此時不會定義 e。只有結果函式會從事件中接收 e 。
因此，您可以使用 e 作為內部函式的引數重新定義 handleChange，如下所示：
function handleChange(func) {
return function (e) {
return func.call(null, e.target.value);
};
}
再往下，您可以跳過傳遞e（無論如何都未定義）。而是這樣做：
onChange={handleChange(setShippingName)}
...但是，我認為您可以通過像這樣行內定義處理程式來大大簡化一切：
onChange={(e) => setShippingName(e.target.value)}
^^這是每個人都這樣做的方式。
uj5u.com熱心網友回復：
如果你堅持，你可以試試這個。
function handleChange(e, func) {
return function () {
return func.call(null, e.target.value);
};
}
onChange={handleChange(e, setShippingName(e.target.value))}
您必須將 setShippingName 設定為回呼函式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/445674.html
標籤：javascript 反应 高阶函数