ReactJS은 - 얼마나 후하게 구성 요소에 초점을 얻을 수 있습니다 볼 수

Question

내가했다가, 숨길 editing: true로 상태를 변경하는 원인이 나는 SocialPostwithCSS 및 onClick에 이름 <p> 하위 구성 요소와 <div>과 <textarea>이 나타날 것입니다 내가 사용하는 것이 this.textarea.focus은 텍스트 영역이 ref={(input)=>{this.textarea=input}}이고 문제가 없습니다.

영역을 자동 크기 조정해야하므로 NPM 패키지 TextareaAutosize을 다운로드했습니다. 이제이 텍스트 영역에 초점을 맞추는 데 문제가 있습니다. 확인, npm TextareAutosize 파일에 class이 있으며 상태 비 저장되지 않습니다. 현재 this.textarea는 undefined

요약을 반환 : 나는 상태 변경 <TextareaAutosize>을 표시하는 원인이 <div>onClick 후 <TextareaAutosize />에 초점을 맞출 수 있습니까? 다음은

파일 :

looking at the code에서

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라는 소품을 통해 내부 심판 노출 것으로 보인다. 그래서 다음과 같이 코드를 변경 : this.state.editing 때

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