10 React控件双向绑定和Ref使用

a457636876

于 2024-03-25 02:52:48 发布

阅读量108

点赞数 1

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/a457636876/article/details/137000194

版权

React 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

import React, {useRef, useState} from "react";

const CommentForm = ({onAddComment}) => {
    const [newCommentText, setNewCommentText] = useState('');
    const textRef = useRef(null);

    const handleAddComment = () => {
        if (newCommentText.trim() !== '') {
            onAddComment(newCommentText);
            setNewCommentText('');
            textRef.current.focus();
        }
    };

    return (
        <div>
            <input
                type="text"
                ref={textRef}
                value={newCommentText}
                onChange={(e) => setNewCommentText(e.target.value)}
                placeholder="输入你的评论"
            />
            <button onClick={handleAddComment}>提交评论</button>
        </div>
    );
};