是否可以将 id/ 字符串传递给 onFocus 事件?
Is it possible to pass an id/ string to an onFocus event?
是否可以将 key/ID 传递给 onFocus 事件?
这是我的代码:
handleChange: (e: SyntheticEvent<FormInputElements>) => void,
handleFocus: (e: SyntheticEvent<FormInputElements>) => void,
const handleEvent = (event?: EventListener, inputvalue: string) => {
if (event) {
return event(component, inputvalue);
}
return null;
};
const handleChange = (e: SyntheticEvent<FormInputElements>) => {
handleEvent(onChange, e.currentTarget.value);
if (hasFocus && showErrors) {
setResolvedErrors(true);
handleFocus(component.key);
}
};
const handleFocus = (e: SyntheticEvent<FormInputElements>) => {
setHasFocus(true);
handleEvent(onFocus, e.currentTarget.value);
};
基本上,在我的 handleChange
事件中 - 如果 if 语句是 运行 - 我想然后 运行 handleFocus
事件 - 但将它传递给我的组件的关键,以便它专注于正确的元素?
您可以为此目的使用 useRef 挂钩。
看看给定的例子:
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
是否可以将 key/ID 传递给 onFocus 事件?
这是我的代码:
handleChange: (e: SyntheticEvent<FormInputElements>) => void,
handleFocus: (e: SyntheticEvent<FormInputElements>) => void,
const handleEvent = (event?: EventListener, inputvalue: string) => {
if (event) {
return event(component, inputvalue);
}
return null;
};
const handleChange = (e: SyntheticEvent<FormInputElements>) => {
handleEvent(onChange, e.currentTarget.value);
if (hasFocus && showErrors) {
setResolvedErrors(true);
handleFocus(component.key);
}
};
const handleFocus = (e: SyntheticEvent<FormInputElements>) => {
setHasFocus(true);
handleEvent(onFocus, e.currentTarget.value);
};
基本上,在我的 handleChange
事件中 - 如果 if 语句是 运行 - 我想然后 运行 handleFocus
事件 - 但将它传递给我的组件的关键,以便它专注于正确的元素?
您可以为此目的使用 useRef 挂钩。
看看给定的例子:
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}