我面临一些案例onClick
or onSubmit
功能需要两者event
and parameter
。
我可以在 React 或普通 html 标签中使用它吗?
或者,只是使用其他函数做一些副作用?
const CustomFC = ({}) => {
const [ id, setId] = useState("");
const [password, setPassword] = useState("");
type FormParams = {
id: string;
password: string;
}
const customClickHandler = useCallback((params: FormParams) =>
{
dispatch(params);
}, [id, password]);
const onChangeId = useCallback((id) => setId(id),[]);
const onChangePassword = useCallback((password) => setPassword(password),[]);
<Form
onClick ={customClickHandler}
onChange={{onChangeId, onChangePassword}}
/>
}
// Form.tsx
const Form = ({
onSubmit,
onChange,
}) => {
const { onChangeId, onChangePassword } = onChange;
const handleSubmit = ( e, params ) => { // <- can this be possible?
e.preventDefault();
onSubmit(params);
}
return (
<form onSubmit={handleSubmit}>
<input ... />
<input ... />
</form>
)
}
任何本机事件处理程序都只有一个event
参数,但您可以使用本机处理程序来调用具有自定义参数的第二个函数:
document.querySelector("button").addEventListener("click", function(event){
actualHandler(event, this.id, this.dataset.test, this.className);
});
function actualHandler(event, id, dataTest, classList){
console.log(event.type, id, dataTest, classList);
}
<button id="btn" data-test="foo" class="bar">Click Me</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)