जब यह ध्यान केंद्रित किया जाए तो रिएक्टज के साथ इनपुट में सभी टेक्स्ट का चयन कैसे करें?

Question

उदाहरण के लिए: कोडपेन

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

Answer 1

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

Comments

यह शुद्ध कार्य (कोई वर्ग) में काम करता है, इस समाधान के लिए thx।

— Jan Jarčík

अतिरिक्त कार्य की आवश्यकता के बिना इसे और सरल बनाया जा सकता है यदि यह केवल कक्षा में एक क्षेत्र के लिए हो:<input type='text' value='Some something' onFocus={e => e.target.select()} />

— TK123

@ TK123 आपको अपने रेंडर तरीकों में तीर के कार्यों से बचना चाहिए । यह jsx-no-bind का भी उल्लंघन करता है जो उदाहरण के लिए eslint-config-airbnb द्वारा उपयोग किया जाता है ।

— dschu

मुझे disabledटेक्स्टबॉक्स के लिए यह काम कैसे मिलेगा ? jsfiddle.net/69z2wepo/317733

— राहुल देसाई

@RahulDesai के बजाय disabled, का उपयोग करें readOnly: jsfiddle.net/kxgsv678

— dschu

Answer 2

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

आपको इनपुट पर रेफरी सेट करना है और जब ध्यान केंद्रित करना है तो आपको चयन () का उपयोग करना होगा

Answer 3

धन्यवाद मैं इसकी सराहना करता हूँ। मैंने ऐसा किया:

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

Answer 4

मेरे मामले में मैं मॉडल में इनपुट दिखाई देने के बाद शुरुआत से पाठ का चयन करना चाहता था:

componentDidMount: function() {
    this.refs.copy.select();
},

<input ref='copy'

Answer 5

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 विशेषता एक फ़ंक्शन को कॉल करेगी। ऑनफोकस फ़ंक्शन में एक पैरामीटर होता है जिसे ईवेंट स्वचालित रूप से उत्पन्न होता है। ईवेंट के ऊपर जैसा दिखा। target.select () एक इनपुट टैग की सभी सामग्री को सेट करेगा।

Answer 6

उपयोग के साथ एक और तरीका कार्यात्मक घटक

const inputEl = useRef(null);

function handleFocus() {
  inputEl.current.select();
}

<input
  type="number"
  value={quantity}
  ref={inputEl}
  onChange={e => setQuantityHandler(e.target.value)}
  onFocus={handleFocus}
/>