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

Posted 2023-02-22

【中文标题】聚焦时如何使用 Reactjs 选择输入中的所有文本？

【英文标题】：How to select all text in input with Reactjs, when it focused?

【发布时间】：2016-07-03 06:56:51

【问题描述】：

例如：codepen

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

【参考方案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 />
      );
    ,
)

【讨论】：

这适用于纯函数（无类），感谢此解决方案。

可以进一步简化而不需要额外的功能，以防它只用于类中的一个字段：<input type='text' value='Some something' onFocus=e => e.target.select() />

@TK123 You should avoid arrow functions in your render methods。它还违反了jsx-no-bind，例如eslint-config-airbnb 使用的。

我如何让它为 disabled 文本框工作？ jsfiddle.net/69z2wepo/317733

@RahulDesai 代替disabled，使用readOnly:jsfiddle.net/kxgsv678

【参考方案2】：

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

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

【参考方案3】：

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

【参考方案4】：

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

【讨论】：

我不明白你为什么需要参考？触发 onFocus 事件时，您将拥有事件对象。

【参考方案5】：

在我的例子中，我想在输入出现在模式中后从头开始选择文本：

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

<input ref='copy'

【参考方案6】：

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 的参数自动生成。像上面显示的 event.target.select() 将设置输入标签的所有内容。

【参考方案7】：

让我们根据@dschu 的回答添加最简单的：

...
<input type='text' value='Some something' onFocus=e => e.target.select() />
...