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

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

将自动对焦道具添加到组件可以解决此问题。谢谢伊兹布！