React - 使输入显示并选中文本

Question

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

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

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

Answer 1

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

例子

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>

React - 使输入显示并选中文本

React - make input appear with text selected

reactjs

react-ref

react-hooks