【前端知识】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;
相关推荐
dy17173 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
attitude.x8 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术9 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体