Question

我正在使用Office Fabric UI React组件，并且如果用户输入逗号，我想将文本输入切换为多行文本。我可以使这一部分正常工作，但是当输入切换到单行和多行输入之间时，它将失去焦点。因此，如果您在文本字段中键入并键入逗号，则文本字段会失去焦点。我相信在幕后，当我在两者之间切换时，办公结构的textfield组件会重新渲染文本区域来代替输入，并且焦点将保留在替换的输入上，而不会自动切换到新的文本区域。有什么想法可以确保多行切换后文本字段保持焦点？我尝试用元素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！

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

1 个答案: