কীভাবে রেেক্সটজগুলির সাথে ইনপুটে সমস্ত পাঠ্য নির্বাচন করতে হয়, যখন এটি ফোকাস করে?

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

এই সমাধানের জন্য খাঁটি ফাংশনে (কোনও শ্রেণি নেই) কাজ করে th

— জান 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

— রাহুল দেশাই

@ রাহুলডেসাই এর পরিবর্তে disabled, ব্যবহার করুন readOnly: jsfiddle.net/kxgsv678

— ডিএসচু

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;

প্রতিক্রিয়া শ্রেণীর জন্য একটি ইনপুটে সমস্ত সামগ্রী স্বয়ংক্রিয়ভাবে নির্বাচন করুন। একটি ইনপুট ট্যাগে অনফোকস অ্যাট্রিবিউট একটি ফাংশন কল করবে। অনফোকাস ফাংশনে স্বয়ংক্রিয়ভাবে উত্পন্ন ইভেন্ট নামে একটি পরামিতি রয়েছে। উপরের ইভেন্টের মতো পছন্দ করুন get

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