react03 事件应用 input默认跳转，剩余输入字数

闲敲棋子落画画

于 2021-10-10 14:29:29 发布

阅读量142

点赞数

分类专栏： react项目

本文链接：https://blog.youkuaiyun.com/jieweiwuwei/article/details/120686029

版权

react.js

react项目专栏收录该内容

11 篇文章

订阅专栏

这个博客展示了如何使用ReactJS创建一个Todo表单组件，包括输入字段和提交按钮。`handleClick`函数阻止了表单的默认提交行为，并在控制台打印输出。`numCount`函数则实时显示剩余可输入字符数，帮助用户监控输入长度不超过140个字符。此示例着重于React组件的状态管理和事件处理。

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

import React from 'react';
class TodoBox extends React.Component{
    handleClick(e){
        e.preventDefault();
        console.log(1);
    }
    numCount(e){
        console.log("还可以输入"+(140-e.target.value.length));
    }
    render(){
        return(
            <div>
                <h1>todo表单</h1>
                <form action="" onSubmit={this.handleClick}>
                <div><input type="text" placeholder="姓名" onInput={this.numCount} /></div>
                <div><input type="text" placeholder="密码" /></div>
                    <button>提交</button>
                </form>
            </div>
        )
    }
}
export default TodoBox

handleClick(e){
        e.preventDefault();//阻止默认提交
        console.log(1);
    }
    numCount(e){
        //输入字数
        console.log("还可以输入字数为"+(140-e.target.value.length));
    }