Question

“ isFocussed”为true时，焦点不在输入上起作用

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，因为它已被弃用。

希望有帮助！

集中精力应对问题

1 个答案: