Ví dụ: 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} />
      );
    },
})

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()}}
      />
    )
  }
});

Bạn phải đặt ref trên đầu vào và khi lấy nét, bạn phải sử dụng select ().

Cảm ơn, tôi đánh giá cao nó. Tôi đã làm như vậy:

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

Trong trường hợp của tôi, tôi muốn chọn văn bản từ đầu sau khi đầu vào xuất hiện trong phương thức:

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;

Tự động chọn tất cả nội dung trong đầu vào cho một lớp phản ứng. Thuộc tính onFocus trên thẻ đầu vào sẽ gọi một hàm. Hàm OnFocus có một tham số gọi là sự kiện được tạo tự động. Giống như hiển thị ở trên event.target.select () sẽ thiết lập tất cả nội dung của thẻ đầu vào.

Thành phần chức năng theo cách khác với 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}
/>