React 关注问题

Question

当 "isFocussed" 为真时，焦点不作用于输入

componentWillReceiveProps(nextProps){
  if(nextProps.isFocussed){
    this.myRef.current.focus();
  }
}

<input ref={this.myRef} />

Answer 1

您没有使用 createRef 并试图使用 focus 方法，这是问题所在。只需创建 callback ref 就可以了。

下面是工作代码 codesandbox link。

index.js

import React from "react";
import ReactDOM from "react-dom";
import FocusComp from "./FocusComp";

class App extends React.Component {
  state = {
    focus: false
  };
  render() {
    return (
      <div className="App">
        <button onClick={() => this.setState({ focus: true })}>
          click me to focus
        </button>
        <br />
        <br />
        <FocusComp isFocussed={this.state.focus} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

FocusComp.js

import React from "react";

class FocusComp extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.isFocussed) {
      this.myRef.focus();
    }
  }
  render() {
    return <input ref={myRef => (this.myRef = myRef)} />;
  }
}

export default FocusComp;

我创建了一个工作代码来让你明白你做错了什么。

需要改进的地方：-

1) 使用 createRef 而不是回调。

2) 不要使用 componentWillReceiveProps，因为它已被弃用。

希望对您有所帮助！！！

React 关注问题

Focus issues with react

ref

reactjs