Javascript ReactJS-如何在使组件可见后将焦点放在组件上

我有一个

和一个

子组件，我命名为

SocialPostwithCSS

，

onClick

会使它隐藏，将状态更改为

编辑：true

，一个

会出现，我会使用

this.textarea.focus

，而textarea有

ref={（input）=>{this.textarea=input}}

并且没有问题

我需要自动调整区域大小，所以我下载了NPM包

TextareaAutosize

，现在我在关注这个文本区域时遇到了问题。我检查，npm TextAreaAutoSize文件具有

类

，并且不是无状态的当前

此.textarea

正在返回

未定义的

摘要：在单击
onClick之后，我如何才能专注于

这会导致状态更改显示
？

文件如下：

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

import React，{Component}来自“React”
从“/SocialPostWithCSS”导入SocialPostWithCSS
从“react autosize textarea”导入textarea autosize
类SocialPost扩展组件{
建造师（道具）{
超级（道具）
此.state={
消息：this.props.socialPost.message，
编辑：假
}
}
_单击编辑（）{
this.textarea.focus（）
}
render（）{
返回(
{（！this.state.editing）？
{等待此.setState（{editing:true}）；此。_clickToEdit}>
{this.state.message}
:
{this.setState（{editing:false}}}
type='text'
ref={（输入）=>{this.textarea=input}
值={this.state.message}
/>
}
)
}
}
导出默认SocialPost
从中，TextareaAutosize似乎通过名为innerRef的道具公开了内部ref。因此，请按如下方式更改代码：

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

{this.setState（{editing:false}}}
type='text'
innerRef={（输入）=>{this.textarea=input}
值={this.state.message}
/>
从中，TextareaAutosize似乎通过名为innerRef的道具公开了内部ref。因此，请按如下方式更改代码：

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

{this.setState（{editing:false}}}
type='text'
innerRef={（输入）=>{this.textarea=input}
值={this.state.message}
/>
this.textarea将未定义的onclick返回到div，因为最初this.state.editing为false时，TextareaAutosize组件未呈现，因此this.textarea未由组件的已装入实例初始化。
this.textarea将未定义的onclick返回到div，因为最初this.state.editing为false textarea未呈现AutoSize组件，因此此.textarea未由该组件的已装入实例初始化。
先生，area genius。这成功了！你介意告诉我你所说的innerRef是什么意思吗？你是说这个代码snipet，第72-79行`saveDOMNodeRef=ref=>{const{innerRef}=this.props；if（innerRef）{innerRef（ref）；}this.textarea=ref；`
ref
允许您访问组件的底层dom节点。但是TextareaAutosize没有dom节点，无论如何也没有直接的dom节点。相反，它包装在一个元素周围，并且该元素有一个dom节点。在类似的情况下，组件通常会从其子元素获取ref，然后显示通常通过名为innerRef的道具将其发送给外部世界。TextareaAutosize遵循这一惯例。您会注意到TextareaAutosize的第102行，这就是它获取的引用。然后您提到的行通过innerRef道具将该引用公开给您先生，area genius。这成功了！您介意告诉我吗告诉我你说的innerRef是什么意思？你是说这个代码snipet，第72-79行`saveDOMNodeRef=ref=>{const{innerRef}=this.props；if（innerRef）{innerRef（ref）；}this.textarea=ref；`
ref
允许您访问组件的底层dom节点。但是TextareaAutosize没有dom节点，无论如何也没有直接的dom节点。相反，它包装在一个元素周围，并且该元素有一个dom节点。在类似的情况下，组件通常会从其子元素获取ref，然后显示通常通过名为innerRef的道具将其传递给外部世界。TextareaAutosize遵循此约定。您会注意到，在TextareaAutosize的第102行中，它从中获取了的引用。然后，您提到的行通过innerRef道具将该引用公开给您