reactjs - React - 使输入出现并选择文本

Question

我有一个使用钩子的功能组件。

const [editMode, setEditMode] = useState(false); 
...
return (
      ... 
     {editMode && <input value="Some value">} 
}

当 editMode 更改为 true 时 - 输入字段正在出现，我希望它显示其中已选择的文本。我怎样才能做到这一点？

---

Answer 1

您可以使用该useRef钩子创建一个 ref 并将其放在您的输入元素上，并使用该useEffect钩子在每次editMode更改时运行一个函数。如果editMode是，您可以在元素上true调用该select方法。ref.current

例子

const { useState, useRef, useEffect } = React;

function App() {
  const [value, setValue] = useState("Some value");
  const [editMode, setEditMode] = useState(false);
  const ref = useRef();

  useEffect(() => {
    if (editMode) {
      ref.current.select();
    }
  }, [editMode]);

  return (
    <div>
      <button onClick={() => setEditMode(!editMode)}>Toggle edit</button>
      <div>
        {editMode && (
          <input
            ref={ref}
            value={value}
            onChange={e => setValue(e.target.value)}
          />
        )}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>