【前端知识】React 基础巩固(二十四)——React 受控组件 & 非受控组件

React 基础巩固(二十四)------React 受控组件 & 非受控组件

React 受控组件 & 非受控组件 的简单案例

  • React 推荐大多数情况下使用受控组件来处理表单数据
    • 在受控组件中,表单数据是由 React 组件来管理的
    • 另一种方式是使用非受控组件,表单数据将交由 DOM 节点来处理
  • 如果使用非受控组件中的数据,需要使用 ref 从 DOM 节点中获取表单数据
  • 在非受控组件中通常使用 defaultValue 来设置默认值
javascript 复制代码
import React, { PureComponent, createRef } from "react";

export class app extends PureComponent {
  constructor() {
    super();

    this.state = {
      username: "",
      password: "",
      isAgree: false,
      hobbies: [
        { value: "sing", text: "唱", isChecked: false },
        { value: "dance", text: "跳", isChecked: false },
        { value: "rap", text: "Rap", isChecked: false },
      ],
      answer: ["A"],
      intro: "outman",
    };

    this.introRef = createRef();
  }

  componentDidMount() {
    // this.introRef.current.addEventListener
  }

  handleSubmitClick(event) {
    // 1.阻止默认行为
    event.preventDefault();

    // 2.获取到所有的表单数据,对数据进行组建
    console.log(this.state.username);
    console.log(this.state.password);
    console.log(
      this.state.hobbies
        .filter((item) => item.isChecked)
        .map((item) => item.value)
    );
    console.log(this.state.answer);
    console.log(this.introRef.current.value);

    // 3.以网络请求的方式将数据传递给服务器(ajax/fetch/axios)
  }

  handleUserDataChange(event) {
    const keyName = event.target.name;
    this.setState({
      [keyName]: event.target.value,
    });
  }

  handleAgreeChange(event) {
    this.setState({
      isAgree: event.target.checked,
    });
  }

  handleHobbiesChange(event, index) {
    const hobbies = [...this.state.hobbies];
    hobbies[index].isChecked = event.target.checked;
    this.setState({
      hobbies,
    });
  }

  handleAnswerChange(event) {
    const options = Array.from(event.target.selectedOptions);
    const values = options.map((item) => item.value);
    this.setState({
      answer: values,
    });
  }

  render() {
    const { username, password, isAgree, hobbies, answer, intro } = this.state;

    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          {/* 1.用户名和密码 */}
          <div>
            <label htmlFor="username">
              用户:
              <input
                id="username"
                type="text"
                name="username"
                value={username}
                onChange={(e) => this.handleUserDataChange(e)}
              />
            </label>

            <label htmlFor="password">
              密码:
              <input
                id="password"
                type="password"
                name="password"
                value={password}
                onChange={(e) => this.handleUserDataChange(e)}
              />
            </label>
          </div>

          {/* 2.checkbox */}
          <label htmlFor="agree">
            <input
              id="agree"
              type="checkbox"
              checked={isAgree}
              onChange={(e) => this.handleAgreeChange(e)}
            />
            同意协议
          </label>

          {/* 3.checkbox多选 */}
          <div>
            您的爱好:
            {hobbies.map((item, index) => {
              return (
                <label htmlFor={item.vlaue} key={item.value}>
                  <input
                    type="checkbox"
                    id={item.vlaue}
                    checked={item.isChecked}
                    onChange={(e) => this.handleHobbiesChange(e, index)}
                  />
                  {item.text}
                </label>
              );
            })}
          </div>

          {/* 4.select */}
          <select
            value={answer}
            multiple
            onChange={(e) => this.handleAnswerChange(e)}
          >
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
          </select>

          {/* 5.非受控组件 */}
          <input type="text" defaultValue={intro} ref={this.introRef} />
          <div>
            <button type="submit">注册</button>
          </div>
        </form>
      </div>
    );
  }
}

export default app;
相关推荐
人工智能训练师4 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny074 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy5 小时前
css的基本知识
前端·css
昔人'5 小时前
css `lh`单位
前端·css
Nan_Shu_6147 小时前
Web前端面试题(2)
前端
知识分享小能手7 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队8 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光8 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5208 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20508 小时前
LeaferJS好用的 Canvas 引擎
前端·开源