Question

点击按钮后，我打开一个下拉列表，我想将焦点从按钮移到下拉列表。我需要访问dom元素才能执行此操作。我读了关于ref以及如何使用它但它不起作用。

constructor(){
   this.changeFocus = this.changeFocus.bind(this)
}
changeFocus() {
   this.test1.focus();
}
render(){
      let menu = (
                <Menu>
                    <MenuItem ref={(input) => { this.test1 = input; }} label="Test1"/>
                    <MenuItem ref={(input) => { this.test2 = input; }} label="Test2"/>
                </Menu>
                );
      return (
        <i onClick={this.changeFocus}</i>
        {menu} 
      )
}

但是我没有定义。获取dom元素的正确方法是什么？请假设changeFocus切换菜单下拉菜单，即当用户点击图标时，它会打开下拉菜单，但焦点仍然是图标。我希望它继续下拉项目

Answer 1

您正在生成一个新函数并将其作为ref-callback提供。 React无法知道它（与所有意图和目的相同）与前一个相同，因此React将新的ref回调视为与前一个不同，并使用当前引用初始化它。你应该尝试将回调函数中的pass设置为ref prop。

constructor(){
   this.changeFocus = this.changeFocus.bind(this)
}
changeFocus() {
   this.test1.focus();
}
setRef1 = ref => this.ref1 = ref
setRef2 = ref => this.ref2 = ref
render(){
      let menu = (
                <Menu>
                    <MenuItem ref={this.setRef1} label="Test1"/>
                    <MenuItem ref={this.setRef2} label="Test2"/>
                </Menu>
                );
      return (
        <i onClick={this.changeFocus}</i>
        {menu} 
      )
}

在REACT中使用REF给出了undefined

1 个答案: