我有一个包含3个成分的模态。每个组件代表一个阶段，例如，当用户单击下一步时，第一个组件正在输入用户的名字，然后它将转到下一个组件，即输入地址，然后用户单击下一步，它将把用户带到最后阶段，输入一个昵称。在组件中的每个input元素上，它将都有一个autoFocus。到目前为止，在最后两个组件中，inputs除第一个组件外具有自动对焦。
不知道为什么第一个没有它，当我初始化模态时，我看到input没有autoFocus，然后我按下了第二个组件{{1} }有了它，然后我回到第一个组件-按下“后退”按钮-然后我看到第一个组件中的input有一个input。很奇怪，我一直在尝试许多方法来解决此问题，从将autoFocus设置为模态，为第一个输入创建一个autoFocus={false}，但仍然无法正常工作。
似乎是模态有问题，它在初始化时焦点位于某处而不是ref上。有人遇到过这个问题吗？
（伪）示例代码
input您的帮助将不胜感激！
注意：
我尝试在模式中将此//Component Hosting the modal
render(){
if(this.state.modal_stage === 1){
<FirstName />
}else if(this.state.modal_stage === 2){
<LasgtName />
}else if(this.state.modal_stage === 3){
<NickName />
}
return(
<Modal
dialogClassname="locationmodal customModal"
show={this.state.modalShow} onHide={this.hideModal}
autoFocus="false">
<Modal.Header>
<div classname="closeModal" onClick={this.hideModal}></div>
</Modal.Header>
<Modal.Body>
{ current_stage}
</Modal.Body>
<Modal.Footer>
{backButton}
{nextButton}
</Modal.Footer>
</Modal>
);
}
//<FirstName /> component
constructor(props){
super(props)
this.inputRef = React.createRef();
}
componentDidmount(){
this.inputRef.current.focus();
}
....
render(){
return(
<div>
<input type="text" placeholder="firstName" ref={this.inputRef}/>
</div>
);
}
设置为autoFocus="false"，但问题仍然存在。