这次给大家带来react做出手机数据同步显示在界面功能，react做出手机数据同步显示在界面的注意事项有哪些，下面就是实战案例，一起来看一下。
要求如下
输入框输入内容数据长度大于0，展示出预览信息
光标离开关闭预览信息
预览信息每隔4位插入一个特殊字符_,输入内容不变
限制长度为13位
只允许输入数字（0-9）
// Zinput.jsimport React, { Component} from 'react';import './Zinput.css'// NOTE: 获取焦点事件 原生onFocus 即可// NOTE: 离开焦点事件 原生onBlur即可// NOTE: 输入框数据过滤 直接在change方法里进行过滤// NOTE: 条件处理 通过不同条件返回不同节点做条件处理class Zinput extends Component { constructor(props) { super(props); this.state = { value: '', showBig: false, }; this.handleChange = this.handleChange.bind(this); this.inputOnFocus = this.inputOnFocus.bind(this); this.inputOnBlur = this.inputOnBlur.bind(this); } inputOnFocus() { if (this.state.value.length > 0) { this.setState({ showBig: true }) } } inputOnBlur() { this.setState({ showBig: false }) if(this.props.chanegNumber){ this.props.chanegNumber(this.state.value) } } handleChange(event) { let val = event.target.value.substr(0, 13) .replace(/[^d]/g, '') event.target.value = val this.setState({ value: val, showBig: true, }); } /** * 根据字符串没隔len位插入一个下滑杠，返回处理后的字符串 * @method getStr * @author 朱阳星 * @datetime 2018-04-02T09:57:58+080 * @email zhuyangxing@foxmail.com * @param {String} str 待处理字符串 * @param {Number} len 每隔位数插入下滑杠 * @return {String} 处理后的字符串 */ getStr(str, len) { let lenth = str.length let len1 = len - 1 let newStr = '' for (var i = 0; i 0) { newStr += str.charAt(i) + '_' } else { newStr += str.charAt(i) } } if (newStr.length % (len + 1) === 0) { // 解决最后一位为补充项问题 newStr = newStr.substr(0, newStr.length - 1) } return newStr } render() { // NOTE return 需要用圆括号包住并处理 // NOTE 条件语句里没有节点也要用空字符串进行处理 否则sonalint会报错，页面也会报错 const showBig = this.state.showBig ? ( { this.getStr(this.state.value,4) }
) : '' return ( {showBig}
) }}export default Zinput; // Don't forget to use export default!
登录后复制
.zInput{ position: absolute; top:80px; left:40px; }.input { position: absolute; top: 0; left: 0;}.big-show { position: relative; top: -40px; font-size: 36px; line-height: 40px; background-color: red;}
登录后复制
功能虽然实现，但是肯定是作为某个节点的某个子组件使用的，父组件调用方法有两种
1.使用refs直接获取子组件state的值
constructor(props) { super(props); this.handerClick2 = this.handerClick2.bind(this);}handerClick2(){ // NOTE 父组件通过refs获取子组件的state console.log("使用ref获取子组件的值",this.refs.zinput.state.value)}render() { return (
);}
登录后复制
2.每次子组件焦点离开时调用父组件传过来的方法，修改父组件state值
constructor(props) { super(props); this.state = { phoneNumber: '', }; this.handerClick = this.handerClick.bind(this); this.changePhoneNumber = this.changePhoneNumber.bind(this);}changePhoneNumber(number){ this.setState({ phoneNumber: number, })}handerClick(){ // NOTE 根据react的思想是在子组件处理完某件事的时候调用父组件的方法修改父组件的state值 console.log("使用state获取值",this.state.phoneNumber)}render() { return (
);}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
懒加载过程中添加loading
babel转换es6方法实现
以上就是react做出手机数据同步显示在界面功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2765629.html
