我做了一個自定義模態。單擊按鈕后會出現此模式。模態包含輸入。輸入也是一個組件。
輸入組件，
<ModalInput label="Name" focus={true} />
模態輸入.jsx ,
const ModalInput = ({ label, focus }) => {
return (
<div className="input-row">
<div className="label">{label}</div>
<input autoFocus={focus} type="text" style={{ width: "300px" }} />
</div>
);
};
ModalInput.defaultProps = {
focus: false,
};
export default ModalInput;
我正在傳遞一個focus用輸入組件呼叫的道具。默認值為假。但此后模態出現它并沒有關注輸入。
uj5u.com熱心網友回復：
我發現這段對話表明這是一種預期的行為。
React autoFocus 屬性未呈現
useRef當組件準備好時，您可以使用并設定焦點：
const inputEl = useRef(null);
useEffect(() => {
inputEl.current.focus();
}, []);
return <div>
<input autofocus="true" ref={inputEl} />
</div>;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/503798.html
標籤：javascript 反应