[javascript] 집중할 때 Reactjs로 입력의 모든 텍스트를 선택하는 방법은 무엇입니까?

Program / 글쓴이

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

입력에 대한 참조를 설정해야하고 포커스를 받으면 select ()를 사용해야합니다.

답변

감사합니다. 감사합니다. 나는 그렇게했다 :

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

답변

제 경우에는 입력이 모달에 나타난 후 처음부터 텍스트를 선택하고 싶었습니다.

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 ()는 입력 태그의 모든 내용을 설정합니다.

답변

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}
/>

답변