Sui Move 前端共学笔记（二）-ref表单域

HOH水分子社区，是一个专注于编程、教育和创新的社区。

需求

1.写一个登录页面，点击登录后执行在控制台打印用户名和密码，点击重置按钮清空输入框。

表单域组件

import React, {Component} from 'react';

class Field extends Component {
    state={
        value:""
    }
    //定义状态value用于在文本框显示及获取文本框输入内容。

    clear=()=>{
        this.setState({value:""})
    }
    // 用于清空value状态，实现重置需求。
    render() {
        return (
            <div style={{background:"lightgray",width:"300px"}}>
            //定义div盒子，颜色亮灰，宽300px
                <lable>{this.props.label}</lable>
                //定义lablel标签，展示类属性label的值
                <input type={this.props.type} onChange={(event)=>{
                    this.setState({value:event.target.value});
                }} value={this.state.value}/>
                //定义输入框，展示类型通过类属性设置，包含一个监听事件，当输入框值发生变化时修改value的值。
            </div>
        )
    }
}

定义了一个组件Field，组件渲染了一个宽度为300px,背景为亮灰色的盒子，盒子中有2个标签，label和input，label的内容通过label属性获取后展示，input标签中展示样式通过属性type获取，当input的值发生变化触发onChange事件，事件执行操作修改表单域的value状态。

在组件中还定义了一个clear方法，用于清空value的值。

表单域调用

import React, {Component} from 'react';
import Field from './Field.js'

class APP extends Component {
    userName=React.createRef();
    passWord=React.createRef();
    //创建引用

    render() {

        return (
            <div>
                <h2>登录页面</h2>
                <Field label={"用户名"} type={"text"} ref={this.userName}/>
                // 定义用户名表单，输入框文本展示，绑定userName引用。
                <Field label={"密码"} type={"password"} ref={this.passWord}/>
                // 定义密码表单，输入框通过password类型隐藏，绑定passWord引用。

                <br/>
                <button onClick={()=>{
                    console.log(this.userName.current.state.value);
                    console.log(this.passWord.current.state.value);
                    //点击按钮后打印用户名密码，这里通过ref引用直接获取状态的值。
                }}>登录</button>
                <button onClick={()=>{
                    this.userName.current.clear();
                    // 通过ref引用调用clear方法，清空用户名。
                    this.passWord.current.setState({value: ""});
                    //通过状态设置直接将密码设置为空。
                }}>重置</button>
            </div>
        );
    }
}

export default APP;

入口，引用表单域组件，创建用户名和密码表单，通过ref引用直接获取和修改组件的状态。

效果展示

界面：

点击登录按钮打印用户名密码：

点击重置清空输入框内容：

HOH水分子社区：