重点关注时,如何使用Reactjs选择输入中的所有文本?


Answers:


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
这适用于纯函数(无类),适用于此解决方案。
JanJarčík16年

11
如果仅适用于该类中的一个字段,则可以进一步简化而不需要额外的功能:<input type='text' value='Some something' onFocus={e => e.target.select()} />
TK123


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()。




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;

自动选择输入中所有内容的反应类别。输入标签上的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}
/>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.