我正在使用Office Fabric UI React组件，如果用户输入逗号字符，我想将文本输入切换为多行文本 . 我可以使这部分工作，但是当输入切换到单线和多线输入之间时，它会失去焦点 . 因此，如果您在文本字段中键入并键入逗号字符，则文本字段将失去焦点 . 我相信，当我在两者之间切换时，来自办公室结构的文本域组件反应重新呈现文本区域代替输入，并且焦点将保留在替换的输入上而不是自动切换到新文本区域 . 任何想法如何确保文本字段在切换多行后保持其焦点？我尝试使用元素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}
/>
);
}
}
1 回答
将autoFocus prop添加到组件可以解决问题 . 谢谢izb！