0

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

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;

1 ответ 1

0

Есть тут ошибка с использованием специального атрибута 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()).

2
  • Господи!!!! Как это еще далеко от понимания... Но спасибо за наводку! Попробую разобраться.
    – Peterblr
    23 ноя 2021 в 18:06
  • Надо просто немного почитать по теме tokmakov.msk.ru/blog/item/638 Думаю, что ошибка где-то здесь <Textarea ref={newPostElement} /><textarea ref={props.ref} />. Переменная newPostElement.current будет undefined, потому что нельзя получить ссылку на функциональный компонент. А props.ref будет undefined, потому что ref не предназначен для передачи пропсов, у него специальное назначение. 25 ноя 2021 в 8:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.