Javascript 反应输入在键入时失去焦点
我不明白为什么当一个组件被定义在另一个组件中时,输入在键入一个字符后会失去焦点。我在其他答案中阅读了ref,但它不起作用 不起作用:Javascript 反应输入在键入时失去焦点,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我不明白为什么当一个组件被定义在另一个组件中时,输入在键入一个字符后会失去焦点。我在其他答案中阅读了ref,但它不起作用 不起作用: import React, { useState, useRef } from "react"; import ReactDOM from "react-dom"; function MyApp() { const [text1, setText1] = useState(""); const
import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
function MyApp() {
const [text1, setText1] = useState("");
const [text2, setText2] = useState("");
const ref1 = useRef(null)
const ref2 = useRef(null)
const TextInput = ({ref, text, onChange }) => {
return <input ref={ref} defaultValue={text} onChange={onChange} />;
};
const onChange1 = e => {
setText1(e.currentTarget.value);
};
const onChange2 = e => {
setText2(e.currentTarget.value);
};
return (
<form className="App">
<TextInput ref={ref1} text={text1} onChange={onChange1} />
<TextInput ref={ref2} text={text2} onChange={onChange2} />
</form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyApp />, rootElement);
当我定义外部组件时,一切都很好
是否有效:
import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
const TextInput = ({ref, text, onChange }) => {
return <input ref={ref} defaultValue={text} onChange={onChange} />;
};
function MyApp() {
const [text1, setText1] = useState("");
const [text2, setText2] = useState("");
const ref1 = useRef(null)
const ref2 = useRef(null)
const onChange1 = e => {
setText1(e.currentTarget.value);
};
const onChange2 = e => {
setText2(e.currentTarget.value);
};
return (
<form className="App">
<TextInput ref={ref1} text={text1} onChange={onChange1} />
<TextInput ref={ref2} text={text2} onChange={onChange2} />
</form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyApp />, rootElement);
每当输入值更改并且MyApp组件呈现时,您都在重新创建TextInput。如果要在MyApp组件中包含TextInput组件,可以使用useCallback钩子防止在组件呈现时重新创建TextInput
这回答了你的问题吗?
import React, { useState, useRef, useCallback } from "react";
import ReactDOM from "react-dom";
function MyApp() {
const [text1, setText1] = useState("");
const [text2, setText2] = useState("");
const ref1 = useRef(null);
const ref2 = useRef(null);
const TextInput = useCallback(({ ref, text, onChange }) => {
return <input ref={ref} defaultValue={text} onChange={onChange} />;
}, []);
const onChange1 = e => {
setText1(e.currentTarget.value);
};
const onChange2 = e => {
setText2(e.currentTarget.value);
};
return (
<form className="App">
<TextInput ref={ref1} text={text1} onChange={onChange1} />
<TextInput ref={ref2} text={text2} onChange={onChange2} />
</form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyApp />, rootElement);