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

从 looking at the code 来看，TextareaAutosize 似乎通过名为 innerRef 的 prop 公开了内部引用。所以像这样更改您的代码：

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

Answer 2

this.textarea 将未定义的 onclick 返回给 div，因为最初当 this.state.editing 为 false 时，TextareaAutosize 组件未呈现，因此 this.textarea 未由安装的实例初始化组件的。

ReactJS - 如何在可见后关注组件

ReactJS - How to get focus on component after make visible

javascript

focus