问当输入加载时，你如何聚焦和选择它？
EN

Stack Overflow用户

提问于 2020-09-06 21:48:32

回答 1查看 361关注 0票数 1

我无法找到在加载时关注和选择输入元素的问题的好答案；最初我只是使用useRef()，将其设置为引用，然后在组件加载(useEffect(，[]))上我将ref.current.focus() / ref.current.select()。但是input内置在autoFocus和onFocus中是更简单的解决方案。

换句话说，考虑下面的代码片段，当您按下按钮时，我们希望将焦点放在输入上(它在这里不起作用)

// Get hook functions (specific for use with stackoverflow code snippet)
const { useState } = React;

const Example = ({title}) => {
  // hook that keeps track of the editing state
  const [editing, setEditing] = useState(false);
  
  // switch to input when button is pressed
  const InputComponent = () => {
    if (!editing) { 
     return ( <span>click for input</span>)
    }
    else {
      return ( <input /> )
    }
  }

  return (
    <div>
      <p>{title}</p>
      <p>{InputComponent()}</p>
      <button onClick={() => setEditing(!editing)}>
        Click me
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="The goal is to have the input automatically focused" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

现在，如果我们使用引用

const { useState, useRef, useEffect } = React;

const Example = ({title}) => {
  const [editing, setEditing] = useState(false);
  // useRef for a reference to the input
  const inputRef = useRef();

  const InputComponent = () => {
    if (!editing) { 
     return ( <span>click for input</span>)
    }
    else {
      // set the ref as a reference to the input
      return ( <input ref={inputRef}/> )
    }
  }
  
  // when editing updates, run this code
  useEffect(() => {
    // when editing is true, focus the input
    if (editing) {inputRef.current.focus()}
  }, [editing])

  return (
    <div>
      <p>{title}</p>
      <p>{InputComponent()}</p>
      <button onClick={() => setEditing(!editing)}>
        Click me
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="The goal is to have the input automatically focused" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

此外，如果希望在聚焦时选择输入的值，可以执行以下操作：

const { useState, useRef, useEffect } = React;

const Example = ({title}) => {
  const [editing, setEditing] = useState(false);
  // define a state variable for the input value
  const [inputValue, setValue] = useState("value of the input");
  const inputRef = useRef();

  const InputComponent = () => {
    if (!editing) { 
     return ( <span>click for input</span>)
    }
    else {
      
      return ( 
        <input 
        ref={inputRef} 
        // define the value of the input
        value={inputValue}
        // when the input is changed, update the state variable
        onChange={(event) => setValue(event.target.value)}
        /> 
      )
    }
  }
  
  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
      // focus and select the value of the input
      inputRef.current.select();
    }
  }, [editing])

  return (
    <div>
      <p>{title}</p>
      <p>{InputComponent()}</p>
      <button onClick={() => setEditing(!editing)}>
        Click me
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="The goal is to have the input automatically focused" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

这种方法将允许您设置输入的一些基本值(就像表示值的风格化方式，然后当用户单击该风格化值时，它将开始编辑)。

这个解决方案很好，但是它很笨重，在某些情况下需要向下传递引用到组件，而且通常不是很干净。那么有没有更好的解决方案呢？是的。

input

javascript

reactjs

select

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-06 21:48:32

下面是一个简化的版本，它将实现相同的效果，但简单得多

const { useState, useRef, useEffect } = React;

const Example = ({title}) => {
  const [editing, setEditing] = useState(false);
  const [inputValue, setValue] = useState("value of the input");
  // no need for a reference

  const InputComponent = () => {
    if (!editing) { 
     return ( <span>click for input</span>)
    }
    else {
      return ( 
        <input 
          // don't need to set an input reference
          onChange={(event) => setValue(event.target.value)}
          value={inputValue}
          onFocus={(event) => event.target.select()} // selects the value on load
          autoFocus // focuses on load
        /> 
      )
    }
  }
  
  // no need for a useEffect
  return (
    <div>
      <p>{title}</p>
      <p>{InputComponent()}</p>
      <button onClick={() => setEditing(!editing)}>
        Click me
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="The goal is to have the input automatically focused" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>