react 组件

来源：互联网发布：公司数据安全编辑：程序博客网时间：2024/04/30 00:50

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 />

0 0