React 学习：react 表单

版权声明：欢迎关注博主公众号：矿洞程序员 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

二、查看效果

表单 程序员 公众号

0 人点赞