ReactJS - 如何在可见后专注于组件

Question

我有一个<div>，其中包含一个我命名SocialPostwithCSS <p>子组件，onClick会导致它隐藏，将状态更改为editing: true，并且会出现一个<textarea>，我将使用this.textarea.focus，文本区域具有ref={(input)=>{this.textarea=input}}并且没有问题。

我需要自动调整区域大小，所以我下载了 NPM 包TextareaAutosize，现在我在关注此文本区域时遇到问题。我检查，npm TextareAutosize 文件具有class并且不是无状态的。目前this.textarea正在返回undefined

摘要：<div> onClick后如何专注于<TextareaAutosize /> 这会导致状态更改显示<TextareaAutosize>？

文件如下：

import React, { Component } from 'react'
import SocialPostWithCSS from './SocialPostWithCSS'
import TextareaAutosize from 'react-autosize-textarea'
class SocialPost extends Component {
    constructor(props) {
        super(props)
        this.state = {
            message: this.props.socialPost.message,
            editing: false
        }
    }
    _clickToEdit() {
        this.textarea.focus()
    }
    render() {
        return (
            <div>
                {(!this.state.editing) ?
                    <div onClick={async ()=>{await this.setState({editing: true});this._clickToEdit}}>
                        <SocialPostWithCSS >{this.state.message}</SocialPostWithCSS>
                    </div>
                    :<div>
                        <TextareaAutosize
                            onBlur={() => {this.setState({ editing: false})}}
                            type='text'
                            ref={(input)=>{this.textarea=input}}
                            value={this.state.message}
                            />
                    </div>
                }
            </div>
        )
    }
}
export default SocialPost

Answer 1

从代码来看，TextareaAutosize 似乎通过一个名为 innerRef 的 prop 公开了内部引用。因此，请像这样更改代码：

<TextareaAutosize
    onBlur={() => {this.setState({ editing: false})}}
    type='text'
    innerRef={(input)=>{this.textarea=input}}
    value={this.state.message}
/>

Answer 2

this.textarea 在单击时向div 返回未定义，因为最初当 this.state.editing 为假时，TextareaAutosize 组件未呈现，因此 this.textarea 未由组件的挂载实例初始化。