类型错误：无法读取 ReactJS 中未定义的属性'focus'

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;

当我单击一个组件时，该错误突然发生。它说类型错误：无法读取未定义的属性"焦点">

错误发生在组件DidMount上

你能花时间帮我解决这个错误吗？

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

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

你必须添加这样的.currentthis.title.current.focus();

希望这有帮助