学习react的事件处理

最新推荐文章于 2024-07-21 14:56:11 发布

*初级小白*~

最新推荐文章于 2024-07-21 14:56:11 发布

阅读量121

点赞数

文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/ScumStudy/article/details/129883333

版权

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

收集表单数据

非受控组件

现用现取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class Mycomponent extends React.Component{
           handleSubmit=(event)=>{
            event.preventDefault();
            const {username,password}=this;
            alert(`你输入的用户名是${username.value},密码是${password.value}`)
           }
        render(){
         return(
             <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
                用户名：<input type="text" name="username" ref={c=>this.username=c}/>
                密码：<input type="password" name="password" ref={c=>this.password=c}/>
                <button>登录</button>    
            </form>
            )
        }
    }
    ReactDOM.render(<Mycomponent />,document.getElementById('root'));
  </script>
</body>

</html>

受控组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class Mycomponent extends React.Component{
            //表单提交的回调
           handleSubmit=(event)=>{
            event.preventDefault();
            const {username,password}=this.state;
            alert(`您输入的用户名是${username}，密码是${password}`)
           }

           //初始化状态
           state={  
            username:'',
            password:'',
           }

           //保存用户名到状态中
           saveUsername=(event)=>{
            this.setState({username:event.target.value})
           }

           //保存密码到状态中
           savePassword=(event)=>{
            this.setState({password:event.target.value})
           }
        render(){
         return(
             <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
                用户名：<input type="text" name="username" onChange={this.saveUsername}/>
                密码：<input type="password" name="password"  onChange={this.savePassword}/>
                <button>登录</button>    
            </form>
            )
        }
    }
    ReactDOM.render(<Mycomponent />,document.getElementById('root'));
  </script>
</body>

</html>