React 学习：react 表单

约定不等于承诺〃 2022-02-19 09:55 241阅读 0赞

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

一、新建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

二、查看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70]: /images/20220219/176e4624b0d34adaaa1dadb7b8d7ef3c.png

React 学习：react 表单

发表评论取消回复

还没有评论，来说两句吧...

相关阅读