Вынести textarea в компоненту React

Question

Помогите вынести в отдельную компоненту, с сохранением встроенных функций. Кнопку получилось создать, а вот постоянно выкидывает ошибки. Вот оригинальный код (в закомментированном - мои попытки сделать компоненту):

import React from "react";
import Post from "./Post/Post";
import {addPostActionCreator, updateNewPostTextActionCreator} from "../../../redux/profileReducer";
import s from "./MyPosts.module.css";
import Button from "../../EnterText/Button/Button";
import Textarea from "../../EnterText/Textarea/Textarea";


function MyPosts(props) {
    let postsElement = props.postData.map(post => <Post message={post.message} id={post.id}
                                                        likesCount={post.likesCount}/>);

    let newPostElement = React.createRef();

    let addPost = () => {
        props.dispatch(addPostActionCreator());
    }

    let onPostChange = () => {
        let text = newPostElement.current.value;
        let action = updateNewPostTextActionCreator(text);
        props.dispatch(action);
    }

    return (
        <div>
            <h2>My posts</h2>
            <div className={s.input_text}>
                <div>
                    <div>
                    <textarea placeholder={"Enter your message"}
                              onChange={onPostChange}
                              ref={newPostElement}
                              value={props.newPostText}/>
                    </div>
                    {/*<Textarea onChange={onPostChange}*/}
                    {/*          ref={newPostElement}*/}
                    {/*          value={props.newPostText}/>*/}
                    <Button onClick={addPost}/>
                </div>
            </div>
            <div>
                New posts
                {postsElement}
            </div>
        </div>
    );
}

export default MyPosts;

Вот код моей компоненты Textarea (вроде все пытаюсь пропихнуть через props, но оно не работает, как только начинаешь вводить текст - выскакивает ошибка):

import React from 'react';
import s from "./Textarea.module.css"

const Textarea = (props) => {
    return (
        <div>
            <textarea placeholder={"Enter your message"}
                      className={s.text_window}
                      onChange={props.onChange}
                      ref={props.ref}
                      value={props.value}/>
        </div>
    );
};

export default Textarea;

Answer 1

Есть тут ошибка с использованием специального атрибута ref. Если нам нужно получить ссылку на DOM-элемент, мы используем специальный атрибут ref

const textareaElem = useRef(null);
.....
return (
    .....
    <textarea ref={textareaElem} />
    .....
)

Если нам нужно получить ссылку на DOM-элемент, который где-то в глубине, не нужно использовать специальный атрибут ref. А вместо этого передать ссылку на объект textareaElem через какой-нибуть другой атрибут (не имеющий специального смысла)

const textareaElem = useRef(null);
.....
return (
    .....
    <Textarea refer={textareaElem} />
    .....
)

И уже в компоненте Textarea использовать специальный атрибут ref

const Textarea = (props) => {
    return <textarea ref={props.refer} />
}

P.S. Вообще, используя специальный атрибут ref мы могли бы получить ссылку на компонент Textarea, если бы он был не функциоанльным, а классовым (это ссылка на экземпляр класса). И через эту ссылку получить доступ к DOM-элементу textarea, который в этом случае должен иметь атрибут ref={this.textareaElem}, а сам класс компонента должен иметь свойство this.textareaElem=React.createRef()).

БЛОГ НА HUSL

Вынести textarea в компоненту React

Ответы (1 шт):