当聚焦时，如何用Reactjs选择输入中的所有文本？ [英] How to select all text in input with Reactjs, when it focused?

问题描述

例如： http://codepen.io/Enclave88/pen/YqNpog?editors = 1010

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类组件：

---

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:

React.createClass({
    handleFocus: function(event) {
      event.target.select();
    },

    render: function() {
      return (
        <input type="text" value="Some something" onFocus={this.handleFocus} />
      );
    },
})

这篇关于当聚焦时，如何用Reactjs选择输入中的所有文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！