Reactjsで入力されたすべてのテキストを、フォーカスしたときに選択するにはどうすればよいですか?


回答:


187

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

1
これは純粋関数(クラスなし)で機能します。このソリューションではthxです。
ヤンJarčík

11
それはクラスで唯一のフィールドのためだ場合は、余分な機能を必要とせずに、さらに単純化することができる:<input type='text' value='Some something' onFocus={e => e.target.select()} />
TK123

4
@ TK123レンダーメソッドで矢印関数を使用しないでください。また、たとえばeslint-config-airbnbで使用されるjsx-no-bindにも違反します。
dschu 2018

1
これをdisabledテキストボックスで機能させるにはどうすればよいですか?jsfiddle.net/69z2wepo/317733
Rahul Desai

3
@RahulDesaiの代わりにdisabled、次を使用してくださいreadOnlyjsfiddle.net/kxgsv678
dschu

5
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()を使用する必要があります。


5

ありがとう、感謝します。私はそうしました:

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

1

私の場合、入力がモーダルに表示された後、最初からテキストを選択したいと思いました。

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

<input ref='copy'

0
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;

reactクラスの入力内のすべてのコンテンツを自動選択します。入力タグのonFocus属性は、関数を呼び出します。OnFocus関数には、イベントと呼ばれるパラメーターが自動的に生成されます。上記のように、event.target.select()は入力タグのすべてのコンテンツを設定します。


0

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}
/>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.