React 学习：react 表单

最新推荐文章于 2025-06-16 17:23:23 发布

原创最新推荐文章于 2025-06-16 17:23:23 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用React构建的简单留言输入框表单组件，演示了如何通过事件处理器获取用户输入并显示输入值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标：写一个留言输入框表单获取输入框的值

一、新建CommentBox.js

import React from 'react'

class CommentBox extends React.Component{

    constructor(props){
        super(props);
        // this.state={
        //     value:''
        // }
        // this.handlerChange=this.handlerChange.bind(this)
        this.handlerSubmit=this.handlerSubmit.bind(this)
    }
    // handlerChange(event){
    //     this.setState({
    //         value:event.target.value
    //     })
    // }
    handlerSubmit(event){
        alert(this.textInput.value)
        // event.preventDefault()
    }
    render(){
        return (
            <form className="p-5" onSubmit={this.handlerSubmit}>
                <div className="form-group">
                    <label>留言内容</label>
                    <input type="text" className="form-control" placeholder="请输入内容" ref={(textInput)=>{this.textInput=textInput}}/>
                </div>
                <button type="submit" className="btn btn-primary">留言</button>
            </form>
        )
    }
}

export default CommentBox

二、查看效果