Merge branch 'master' of github.com:BUPTlhuanyu/ReactNote

BUPTlhuanyu · Nov 14, 2019 · fc5fc45 · fc5fc45
2 parents 71a3efb + e5ac7b7
commit fc5fc45
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 0 deletions.
diff --git a/react/runlogic/input.html b/react/runlogic/input.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="react.js"></script>
+    <script src="react-dom.js"></script>
+    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
+</head>
+<body>
+<div id="app"></div>
+<script type="text/jsx" src="input.js"></script>
+</body>
+</html>
diff --git a/react/runlogic/input.js b/react/runlogic/input.js
@@ -0,0 +1,101 @@
+/**
+ * Created by lhy on 2018/12/6.
+ */
+window.globalContainer = [];
+window.containerInfoStack = [];
+window.fiberStackTest = []
+function formatMoney(str) {
+    str = str + ''
+    if (/[^0-9.]/.test(str)){
+        return "0.00"
+    }
+     // 找到小数点的下标
+     let pointIdx = str.indexOf('.')
+     // 如果没有小数点
+     if (pointIdx < 0) {
+         // 将数值进行千位符转换
+       str = str.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+     } else { // 如果有小数点
+         // 取整数部分, 也可以用 parseInt
+       let int = str.substr(0, pointIdx)
+       // 整数部分进行千位符转换
+       str = int.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + str.substr(pointIdx)
+     }
+    return str 
+}
+
+function testInputComponent(){
+    class APP extends React.Component{
+        static getDerivedStateFromProps(){
+            console.log('APP getDerivedStateFromProps');
+            return {}
+        }
+        constructor(props){
+            super(props)
+            this.state = {
+
+            }
+        }
+        componentDidMount(){
+            console.log('APP componentDidMount');
+        }
+        render(){
+            console.log("APP render")
+            return (
+                <div>
+                    <Footer/>
+                </div>
+            )
+        }
+    }
+
+    class Footer extends React.Component{
+        static getDerivedStateFromProps(){
+            console.log('Footer getDerivedStateFromProps');
+            return {}
+        }
+        constructor(props){
+            super(props)
+            this.state = {
+                amount: ''
+            }
+        }
+        changeValue(e){
+            let that = this
+            let amount = e.target.value
+                .replace(/^0/, '') // 第一个不能为 0
+                .replace(/[^\d\.]/g, '') //如果输入非数字，则替换为''
+                .replace(/^\./g,'') //必须保证第一个为数字而不是 .  
+                .replace('.','$##$').replace(/\./g,'').replace('$##$','.') //保证.只出现一次，而不能出现两次以上 
+                .replace(/^(\d+)\.(\d\d).*$/,'$1.$2') // 最多两位小数
+            amount = formatMoney(amount)
+            setTimeout(()=>{
+                that.setState({
+                    amount: amount
+                })
+            },100)
+        }
+        componentDidMount(){
+            console.log('Footer componentDidMount');
+        }
+        render(){
+            console.log("Footer render")
+            return (
+                <div>
+                    <input 
+                        onInput={(e) => {
+                            this.changeValue(e)
+                        }}
+                        value = {this.state.amount}
+                    ></input>
+                </div>
+            )
+        }
+    }
+    ReactDOM.render(
+        <APP/>,
+        document.getElementById('app')
+    );
+}
+testInputComponent()
+