React 学习：react 表单

约定不等于承诺〃 2022-02-19 09:55 250阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

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

相关阅读

相关 REACT_react表单数据绑定封装

import React from 'react'; class Index extends React.Component { state =

向右看齐/ 2022年10月12日 01:23/ 0 赞/ 168 阅读

相关浅谈React表单组件

表单组件不同于其他原生组件，可以通过用户交互发生变化，使响应用户交互的表单数据处理更加容易。 1、交互属性表单组件支持几个受用户交互影响的属性： 1) value

深碍√TFBOYSˉ_/ 2022年06月16日 03:44/ 0 赞/ 202 阅读

相关 React -- 表单

牢记：在React中，一切数据都是状态。应用表单组件 1、文本框 input&textarea mport React, { Component } fro

野性酷女/ 2022年06月12日 22:16/ 0 赞/ 167 阅读

相关 React（10）React表单元素应用方法大全

16、表单总结写前面 1. 值的改变，通过 `onChange` 事件触发（包括文字输入框、radio、checkbox）； 2. 选中与否，通过设置 HTML

灰太狼/ 2022年05月31日 08:08/ 0 赞/ 152 阅读

相关 React.js学习2——React 组件生命周期、React AJAX、React 表单与事件

一、React 组件生命周期组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounti

素颜马尾好姑娘i/ 2022年05月13日 13:52/ 0 赞/ 144 阅读

相关 React 学习：react 表单

目标：写一个留言输入框表单获取输入框的值一、新建CommentBox.js import React from 'react' class

约定不等于承诺〃/ 2022年02月19日 09:55/ 0 赞/ 251 阅读

相关 react表单密码验证

表单验证：验证密码强度（通过组件方法，但是不够灵活，只限于简单使用） import React, { Component } from "react";

迈不过友情╰/ 2022年02月13日 15:55/ 0 赞/ 331 阅读

相关 react中使用AntD表单

react中使用AntD表单 1.双向数据绑定 render() { const { getFieldDecorator } = thi

àì夳堔傛蜴生んèń/ 2022年01月25日 18:13/ 0 赞/ 414 阅读

相关 react form表单

from表单 1、根据state设置input的值当在input标签中使用value={this.state.xx}时，不能直接这样设置,需要配

╰半夏微凉°/ 2021年07月25日 01:17/ 0 赞/ 641 阅读

相关 React官网学习实践 - 表单

HTML表单元素与React中的其他DOM元素有所不同,因为表单元素生来就保留一些内部状态。例如，下面这个表单只接受一个唯一的name。 <form> <

爱被打了一巴掌/ 2021年06月24日 16:10/ 0 赞/ 440 阅读