React+JS--input框绑定值

最新推荐文章于 2024-03-17 19:48:03 发布

内向蛋挞

最新推荐文章于 2024-03-17 19:48:03 发布

阅读量340

点赞数

文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/m0_62330492/article/details/129747474

版权

这篇文章展示了在React中使用函数组件的useStateHook和类组件的ref来处理用户登录时输入验证和信息获取的方法。useState示例中，通过改变state来更新输入值并打印登录信息。类组件例子则利用ref直接访问DOM元素获取值，并进行了非空校验。

摘要由CSDN通过智能技术生成

1.函数方式

import { useState } from "react"

const UseStateLogin = () => {
    //定义请求参数
    const [user, setuser] = useState({ username: "", pass: "" })
    //更改请求参数
    const Changeusename = (e) => setuser({ ...user, username: e.target.value })
    //更改请求参数
    const Changepass = (e) => setuser({ ...user, pass: e.target.value })
    //打印请求参数
    const login = async() => {
        console.log(user);
    }

    return (
        <div>
            <div>
                <div>
                    <input type="text" placeholder="请输入用户名" onChange={Changeusename} />
                </div>
                <div>
                    <input type="password" placeholder="请输入用户名" onChange={Changepass} />
                </div>
                <button onClick={login}>登录</button>
            </div>
        </div>
    )
}
export default UseStateLogin

2.类组件方式---ref

import { Component } from "react";


export default class Login extends Component {
    //属性
    constructor(props) {
        super(props)
        this.username = "",
        this.pass = ""
    }
    //登录
    async getinfo() {
        //非空校验---当没有值的时候提示
        if (this.username.value == "" && this.pass.value == "") {
            alert("账号或名称不可以为空")
            return
        }
        //值
        console.log(this.username.value);
        console.log(this.pass.value);
    }






    //页面
    render() {
        return (
            <div>
                    <div className="body">
                        <div className="content">
                            <input type="text" ref={c => this.username = c} placeholder="请输入姓名" /><br />
                            <input type="password" ref={c => this.pass = c} placeholder="请输入密码" /><br />
                            <button onClick={() => this.getinfo()}>获取登录信息</button>
                        </div>
                    </div>
                
               
            </div>
        )
    }
}