react 组件

最新推荐文章于 2024-07-24 19:42:39 发布

XiaoChouGouShi

最新推荐文章于 2024-07-24 19:42:39 发布

阅读量464

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/XiaoChouGouShi/article/details/52081843

本文介绍如何在React中创建自定义输入验证组件MyInput。该组件可通过onChange事件实时检查输入值的有效性，并针对非数字输入提供即时反馈。此外，还讨论了如何进一步拓展这一概念以实现更复杂的输入验证场景。

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

react 每个组件都应该有state props

input 的输入合法性可以在自定义的组件Myinput里面通过onChange 事件来验证

var MyInput = React.createClass({
    getInitialState: function() {                              //设置初始状态 
        return {
            Error:"",
            value:""
        };
    },
    HandleChange:function(e){
        var value = e.target.value;
        var Error = "";
        
        if(isNaN(value)){					//验证用户输入是否为数字，不为数字就提示“。。。”
            Error="请输入数字！"
        }
        this.setState({
            value:value,
            Error:Error
        })
    },
    render:function(){
        return (
            <div>
                <span>{this.props.title}</span>
                <input type="text" id={this.props.id} value={this.state.value} onChange={this.HandleChange} />
                <span style={{color:"red", marginTop:"20px"}}>{this.state.Error}</span>
            </div>
        )
    }
});

在其他组件里可以使用<MyInput id="myid" title="mytitle" />来使用自定义组件。

下一步准备查一下react中input输入验证：

比如银行卡输入框，每输入4位数字自动补充空格。

1111 2222 3333 4444 555

类似这样的标准银行卡输入组件<BankcardInput />