我有以下几点：

class MyTextArea extends React.Component {

  handleClick = () => {
    this.focus();
  }

  focus = () => this.ref.focus;

  handleRef = (component) => {
    this.ref = component;
  };

  render() {
    return (
      <div className="magicHelper" onClick={this.handleClick}>
        <textarea></textarea>
      </div>
    );
  }
}

我的CSS：

.magicHelper {
  width: 100%;
  height: 100%;
}
textarea {
  line-height: 32px;
}

我需要这样做，因为我需要将textarea的占位符在页面中水平和垂直居中。给定textareas不能使文本垂直居中，我需要使textarea的高度保持较短。因此，我需要做到这一点，以便当用户在文本区域之外单击时，以为他们在单击文本区域时，文本区域会自动聚焦。

这将导致ESLint错误：“具有单击处理程序的可见，非交互式元素必须至少具有一个键盘侦听器”。如何更新以上内容以通过eslint？