11 | Refs are probably the most misunderstood and misused part of React. All too often, I 12 | see developers using refs to manipulate the DOM directly or work around React in 13 | someway which makes working with React much harder. In this article I am going to go 14 | over everything you need to know about refs in order to help you never make those 15 | ref mistakes. 16 |
17 |19 | In order to work with refs in React you need to first initialize a ref which is what 20 | the useRef hook is for. This hook is very straightforward, and takes an initial 21 | value as the only argument. 22 |
23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /client/src/components/Comments.css: -------------------------------------------------------------------------------- 1 | .commentsContainer{ 2 | background-color: rgb(134, 134, 134); 3 | /* height: 100vh; */ 4 | width: 80vw; 5 | color:black; 6 | box-shadow: 0px 0px 15px white; 7 | border-radius: 5px ; 8 | display:flex; 9 | flex-direction: column; 10 | /* justify-content: center; */ 11 | align-items: center; 12 | margin-bottom:50px; 13 | } 14 | 15 | .newCommentContainer{ 16 | display:flex; 17 | flex-direction: column; 18 | background-color: rgb(189, 189, 189); 19 | border-radius: 5px ; 20 | margin:20px; 21 | width: 60vw; 22 | 23 | } 24 | .writeNewTitle{ 25 | margin: 10px 0px 0px 20px ; 26 | } 27 | .newCommentName{ 28 | margin: 20px 0px 0px 20px ; 29 | height: 50px; 30 | width: 250px; 31 | overflow: hidden; 32 | resize: none; 33 | padding:20px; 34 | box-sizing: border-box; 35 | border-radius:10px; 36 | border: 1px solid black; 37 | } 38 | .newCommentBody{ 39 | margin: 20px ; 40 | width: 55vw; 41 | resize: vertical; 42 | padding:20px; 43 | box-sizing: border-box; 44 | border-radius:10px; 45 | border: 1px solid black; 46 | } 47 | .submit{ 48 | margin:10px; 49 | width:120px; 50 | font-size: 30px; 51 | } -------------------------------------------------------------------------------- /client/src/components/Comments.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from "react"; 2 | import SingleComment from "./SingleComment"; 3 | import timeFunc from "./timeFunc"; 4 | 5 | import "./Comments.css"; 6 | 7 | export default function Comments() { 8 | const [comments, setComments] = useState([ 9 | { name: "Alexei Ryadov", time: "29.06.2018 20:22", body: "good job" }, 10 | { name: "Good feedback", time: "29.06.2020 20:22", body: "I Really like this blog" }, 11 | ]); 12 | const name = useRef(); 13 | const body = useRef(); 14 | 15 | const submitFunc = () => { 16 | if (body.current.value && name.current.value) { 17 | const newObj = { 18 | name: name.current.value, 19 | body: body.current.value, 20 | time: timeFunc(), 21 | }; 22 | name.current.value = ""; 23 | body.current.value = ""; 24 | 25 | setComments((prev) => [...prev, newObj]); 26 | } 27 | }; 28 | const createError = () => { 29 | setComments({}); 30 | }; 31 | const ChangeFocus = (e, field) => { 32 | if (e.keyCode === 13) { 33 | body.current.focus(); 34 | } 35 | }; 36 | return ( 37 |