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

JavaScript

EvaPro

2020-03-13

var InputBox = React.createClass({
  render: function() {
    return (
      <input className="mainInput" value='Some something'></input>
    )
  }
});

第1457篇《重点关注时，如何使用Reactjs选择输入中的所有文本？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

录泰红木 2020.03.13

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

EvaPro 2020.03.13

谢谢，我很感激。我是这样做的：

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

西门神奇 2020.03.13

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