Question

import React, { Component } from "react";
import PropTypes from "prop-types";
import Textarea from "react-textarea-autosize";

class InputSet extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }


  static propTypes = {
    onChange: PropTypes.func,
    title: PropTypes.string,
    body: PropTypes.string
  };

  componentDidMount() {
    this.title.focus();
  }

  render() {
    const { onChange, title, body } = this.props;

    return (
      <div>
        <TitleInput
          name="title"
          onChange={onChange}
          placeholder="Title"
          innerRef={ref => (this.title = ref)}
          value={title}
        />
        <StyledTextArea
          minRows={3}
          maxRows={20}
          placeholder="Please enter a note..."
          name="body"
          onChange={onChange}
          value={body}
        />
      </div>
    );
  }
}

export default InputSet;

当我单击一个组件时，该错误突然发生。并显示 TypeError：无法读取未定义的属性“ focus”

该错误发生在 componentDidMount

您能花点时间帮助我解决此错误吗？

我不明白为什么会出现此错误

Answer 1

据我所知，title不是您的InputSet组件的类属性。

我相信您打算使用React.createRef() API将ref附加到您的React元素。

this.title = React.createRef();

在您的构造函数上，

constructor(props) {
  super(props);
  this.state = {};
  this.title = React.createRef();
}

然后

componentDidMount() {
  if (this.title.current) {
    this.title.current.focus();
  }
}

Answer 2

您必须像这样.current添加this.title.current.focus();

希望这会有所帮助

TypeError：无法读取ReactJS中未定义的属性“ focus”

2 个答案: