前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React 学习:react 表单

React 学习:react 表单

作者头像
爱明依
发布2019-04-27 20:55:51
7290
发布2019-04-27 20:55:51
举报
文章被收录于专栏:爱明依爱明依

版权声明:欢迎关注博主公众号:矿洞程序员 https://blog.csdn.net/qq_32423845/article/details/89330091

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

一、新建CommentBox.js

代码语言:javascript
复制
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

二、查看效果

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年04月16日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档