如何使用 Reactjs 选择输入中的所有文本，当它聚焦时

How to select all text in input with Reactjs, when it focused?

本文关键字：文本 聚焦 Reactjs 何使用 选择 输入      更新时间：2023-09-26

例如：codepen 

var InputBox = React.createClass({
  render: function() {
    return (
      <input className="mainInput" value='Some something'></input>
    )
  }
});

Functional component ：

const handleFocus = (event) => event.target.select();
const Input = (props) => <input type="text" value="Some something" onFocus={handleFocus} />
<小时 />

ES6 class component ：

class Input extends React.Component {
    handleFocus = (event) => event.target.select();
    render() {
        return (
            <input type="text" value="Some something" onFocus={this.handleFocus} />
        );
    }
}
<小时 />

React.createClass ：

React.createClass({
    handleFocus: function(event) {
      event.target.select();
    },
    render: function() {
      return (
        <input type="text" value="Some something" onFocus={this.handleFocus} />
      );
    },
})

另一种方式 使用useRefHook的功能组件：

const inputEl = useRef(null);
function handleFocus() {
  inputEl.current.select();
}
<input
  type="number"
  value={quantity}
  ref={inputEl}
  onChange={e => setQuantityHandler(e.target.value)}
  onFocus={handleFocus}
/>

让我们根据@dschu的答案添加最简单的：

...
<input type='text' value='Some something' onFocus={e => e.target.select()} />
...

谢谢，我很感激。我做到了： 

var input = self.refs.value.getDOMNode();
            input.focus();
            input.setSelectionRange(0, input.value.length);

var InputBox = React.createClass({
  getInitialState(){
    return {
      text: ''
    };
  },
  render: function () {
    return (
      <input
        ref="input"
        className="mainInput"
        placeholder='Text'
        value={this.state.text}
        onChange={(e)=>{this.setState({text:e.target.value});}}
        onFocus={()=>{this.refs.input.select()}}
      />
    )
  }
});

您必须在输入上设置 ref，当聚焦时，您必须使用 select（）。

就我而言，我想在输入出现在模态中后从头开始选择文本：

componentDidMount: function() {
    this.refs.copy.select();
},
<input ref='copy'

var React = require('react');
var Select = React.createClass({
    handleFocus: function(event) {
        event.target.select()
    },
    render: function() {
        <input type="text" onFocus={this.handleFocus} value={'all of this stuff'} />
    }
});
module.exports = Select;

自动选择反应类输入中的所有内容。输入标记上的 onFocus 属性将调用函数。OnFocus 函数有一个称为自动生成的事件的参数。就像上面显示的event.target.select（）将设置输入标签的所有内容。

相关文章：