更改为多行后文本输入失去焦点

Posted 2023-02-22

【中文标题】更改为多行后文本输入失去焦点

【英文标题】：Text input loses focus after changing to multiline

【发布时间】：2019-02-25 09:06:00

【问题描述】：

我正在使用 Office Fabric UI React 组件，如果用户输入逗号字符，我希望将文本输入切换为多行文本。我可以让这部分工作，但是当输入在单行输入和多行输入之间切换时，它会失去焦点。因此，如果您在文本字段中键入并键入逗号字符，则文本字段将失去焦点。我相信，当我在两者之间切换时，office fabric react 的 textfield 组件会重新渲染一个 textarea 来代替输入，并且焦点将保留在替换的输入上，而不是自动切换到新的文本区域。有什么想法可以确保在切换多行后文本字段保持焦点？我尝试使用元素 ref 设置焦点，但这不起作用..

export class PhoneNumbers extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      phoneNumber: "",
      isMultipleNumbers: false
    ;
    this.numbersInputRef = React.createRef();
    this.handleNumbersChange = this.handleNumbersChange.bind(this);
  
  handleNumbersChange(event) 
    let numbers = event.target.value;
    this.setState( isMultipleNumbers: numbers.indexOf(";") > 0 ? true : false );
    this.setState(
      phoneNumber: numbers
    );
  

  render() 
    return (
      <TextField
        label="Phone Numbers"
        name="phoneNumber"
        value=this.state.phoneNumber
        onKeyUp=this.handleNumbersChange
        componentRef=input => (this.numbersInputRef = input)
        multiline=this.state.isMultipleNumbers
      />
    );
  

【问题讨论】：

尝试将 autoFocus 属性添加到您的组件中。

啊，太简单了！这解决了它。谢谢！

【参考方案1】：

将 autoFocus 属性添加到组件可以解决问题。谢谢 izb！