当聚焦时，如何用Reactjs选择输入中的所有文本？

Question

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

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

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

您必须在输入上设置参考，在聚焦时您必须使用select（）。

Answer 3

谢谢，我很感激。我这样做了：

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

Answer 4

def remove(lst):
    unique=[]
    for i in lst:
        if i not in unique: unique.append(i)
    return unique

自动选择反应类输入中的所有内容。输入标记上的onFocus属性将调用函数。 OnFocus函数有一个名为event的参数自动生成。像上面的show一样，event.target.select（）将设置输入标记的所有内容。

Answer 5

在我的情况下，我想在输入出现在模态中之后从头开始选择文本：

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

<input ref='copy'

Answer 6

带有useRefHook的另一种功能组件：

Application.Evaluate("SUMPRODUCT(--(E10:E14<>""""))=0")