如何在 React 中使用 Material-UI 在 onFocus 事件的 Textfield 中选择部分文本？

Posted 2023-02-22

【中文标题】如何在 React 中使用 Material-UI 在 onFocus 事件的 Textfield 中选择部分文本？

【英文标题】：How select part of text in a Textfield on onFocus event with material-UI in React?

【发布时间】：2019-06-22 07:29:13

【问题描述】：

我在反应应用程序中有一个带有材料 -UI TextField 的模态表单，我有一个默认值，es。一个文件，我会在加载元素时只选择文件名而不选择扩展名....

我在标签 TextField 中做了这段代码：

<textField 
    value=value
    fullWidth
    autoFocus
    onFocus=event => 
    event.target.select() />

但这将选择文本字段内的所有文本。 如何只选择文本的一部分？ 例如：如果我有 myfile.doc 我只会被选中 myfile 像这样

谢谢

【问题讨论】：

请附上MCVE代码***.com/help/mcve

var filename = 'myfile.doc'; var filename_without_extension = filename.split('.')[0];

但我必须在 textFiled bat 中显示扩展名而不是选择...

我想我回答了 ，但这会选择 textField 中的所有文本。如何只选择文本的一部分？例如：如果我有 myfile.doc，我只会选择 myfile。如果您有任何其他问题，请在第一条评论中听取@AlvinTheodora 的建议，这基本上意味着您必须改进/更新您的问题，或者发布另一个问题。您当前的代码没有为我们提供足够的信息来帮助您。

Selecting all text in html text input when clicked的可能重复

【参考方案1】：

使用setSelectionRange 结合lastIndexOf 方法查找最后一个. 的位置。

class App extends React.Component 
  handleFocus = event => 
    event.preventDefault();
    const  target  = event;
    const extensionStarts = target.value.lastIndexOf('.');
    target.focus();
    target.setSelectionRange(0, extensionStarts);
  
  
  render()
    return (
      <input
        value='myfile.doc'
        onFocus=this.handleFocus
      />
    )
  


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

gazdagergo 完美非常感谢你，这正是我所需要的

【参考方案2】：

我会使用拆分并获取数组的第一个条目。

text = "mydoc.doc";
console.log(text.split(".")[0]);

【讨论】：

但是有了这个，我的文本字段中只有文件的名称，我需要所有的名称，所以“mydoc.doc”但只有字符串 mydoc 的一部分会被选中跨度>