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

Question

我正在使用 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}
      />
    );
  }
}

Answer 1

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