摘要

  1. 事件处理
  2. 函数柯里化
  3. 生命周期

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    class  Demo extends React.Component{
        /**
         * 调用后返回一个容器
         */
        myRef = React.createRef()
        showdata = () => {
            alert(this.myRef.current.value)
        }
        showdata2 = (event) => {
            alert(event.target.value)
        }
        render(){
            return(
                <div>
                    <input  ref={this.myRef} type="text" placeholder="点击按钮提示左侧数据"/>
                    <button onClick={this.showdata}>点我提示左侧的数据</button>
                    <input onBlur={this.showdata2} type="text"/>
                </div>
            )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
</body>
</html>

函数柯里化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
   class Login extends React.Component{
       state = {
           username:'',
           password:''
       }
       saveFormData = (dataType) => {
            return (event) => {
                this.setState({[dataType]:event.target.value})
            }
       }
       showdata = (event) =>{
           event.preventDefault() //阻止表单提交
           const { username,password } = this.state
           alert(`username ${username} password ${password}`)
       }
       render(){
           return(
               <form onSubmit={this.showdata}>
                   <input onChange={this.saveFormData('username')} type="text" name="username" />
                   <input onChange={this.saveFormData('password')} type="password" name="password"/>
                   <button>登录</button>
               </form>
           )
       }
   }
   ReactDOM.render(<Login/>,document.getElementById("test"))
</script>
</body>
</html>

END

有问题请联系feinan6666@outlook.com

本文作者：
 文章标题：React学习笔记
 本文地址：https://home.cnboy.top/45.html
 版权说明：若无注明，本文皆神码人の世界原创，转载请保留文章出处。
最后修改：2021 年 09 月 25 日 06 : 19 PM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏