일부 케이스 onClick또는 onSubmit기능이 event및 parameter. 반응이나 바닐라 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다