輸入時反應輸入失去焦點

Question

我不明白為什么在另一個組件中定義組件時輸入一個字符后輸入會失去焦點。 我閱讀了其他答案以使用 ref。 但它不起作用。

不工作：

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);

JS小提琴

Answer 1

每當輸入值更改並且MyApp組件呈現時，您都在重新創建TextInput 。 如果要在MyApp組件中包含TextInput組件，可以使用useCallback掛鈎來防止在組件呈現時重新創建TextInput 。

JSFiddle

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);