React Передача данных textarea для добавления нового поста

Question

Здравствуйте товарищи программисты! Не понимаю как извлечь текст из textarea и использовать его для добавления новых постов в блоге. Это должно было быть примерно так: 1)Пользователь вводит информацию в textarea 2)Нажимает на кнопку AddPost 3)Информация на странице обновляется и новый пост добавляется в список Я только начинаю изучать React. Спасибо за помощь. Вот код который я пытался написать:

import styles from "./Blog.module.css"
import React from "react"


let addPost = () => {
    let text = textAreaRef.current.value
    
}

let textAreaRef = React.createRef()

const Blogger = (props) => {
    return (
        <div>
            {props.text}
        </div>
    )

}
const Blog = () => {
    return (
        <div>
            <div>
                <textarea ref={textAreaRef}></textarea>
                <button onClick={addPost}>Add Post</button>
            </div>
            <div>
                <Blogger />
            </div>
            
        </div>
    )
}
export default Blog

Answer 1

Можно сделать textarea контролируемым компонентом, тогда мы легко сможем копировать его текст в новый пост и очищать текст когда нажата кнопка добавить. Получается примерно так:

import React from "react";

const Blog = () => {
  const [textareaText, setTextareaText] = React.useState("");
  const [posts, setPosts] = React.useState([]);

  const addPostHandler = () => {
    const newPost = {
      id: Math.random(),
      value: textareaText,
      timestamp: new Date(),
    };
    setPosts([...posts, newPost]);
    setTextareaText("");
  };

  return (
    <div>
      <textarea
        placeholder="Enter post your here ..."
        value={textareaText}
        onChange={(e) => setTextareaText(e.target.value)}
      />
      <button onClick={addPostHandler}>Add post</button>
      <Posts posts={posts} />
    </div>
  );
};

export default Blog;

const Posts = ({ posts }) => {
  return (
    <div>
      {posts.map(({ id, value, timestamp }, idx) => (
        <div
          key={id}
          style={{
            display: "flex",
            width: "70%",
            justifyContent: "space-between",
          }}
        >
          <div>Post # {idx + 1}</div>
          <div>{value}</div>
          <div>Post time: {timestamp.toLocaleTimeString()}</div>
        </div>
      ))}
    </div>
  );
};

БЛОГ НА HUSL

React Передача данных textarea для добавления нового поста

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