Reactjs가 초점을 맞출 때 입력되는 모든 텍스트를 선택하려면 어떻게 해야 합니까?

Reactjs가 초점을 맞출 때 입력되는 모든 텍스트를 선택하려면 어떻게 해야 합니까?

예: 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} />
      );
    },
})

useRef를 사용하는 Another Way 기능 컴포넌트후크:

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 함수에는 자동으로 생성되는 이벤트라는 파라미터가 있습니다.위의 show above event.target과 같습니다.select()는 입력 태그의 모든 내용을 설정합니다.

언급URL : https://stackoverflow.com/questions/36051883/how-to-select-all-text-in-input-with-reactjs-when-it-focused