Question

我阅读了类似的问题，但我认为情况有所不同。首先，我正在使用React 15，我有两个组件（父和子）。

我以普通的JavaScript方式到达输入元素，并在componentDidUpdate中专注于它，但是componentDidMount不起作用。注销该元素后，可以在控制台中看到正确的元素。

父组件

 componentDidMount(){
        console.log(document.getElementById('abc')) // logs the correct element
        document.getElementById('abc').focus(); // DOES NOT work
    }

  componentDidUpdate(){
        document.getElementById('abc').focus(); // works
    }

子组件

<input autofocus={true} name="search" id="abc" type="text"></input>

Answer 1

也许尝试使用ref

您的父组件：

componentDidMount() {
  this.input.focus()
}

<ChildComponent inputRef={node => (this.input = node)} />

您的子组件：

const ChildComponent = ({ inputRef }) => (
  <input name="search" ref={inputRef} type="text"/>
)

焦点在componentDidUpdate中起作用，但在componentDidMount中不起作用

1 个答案: