React 中的受控组件与非受控组件-js教程-PHP中文网

React 中的受控组件与非受控组件

碧海醫心

发布： 2024-12-15 19:00:14

转载

512人浏览过

受控组件：通过 state 或 props 控制表单元素状态的 react 组件，即每个状态突变都会有一个关联的处理函数。

特点

Android传感器编程中文WORD版

本文档主要讲述的是Android传感器编程；传感器是一种物理装置或生物器官,能够探测、感受外界的信号、物理条件（如光、热、湿度）或化学组成（如烟雾），并将探知的信息传递给其它装置或器官。同时也可以说传感器是一种检测装置，能感受被测量的信息，并能将检测的感受到的信息，按一定规律变换成为电信号或其它所需形式的信息输出，以满足信息的传输、处理、存储、显示、记录和控制等要求。它是实现自动检测和自动控制的首要环节。感兴趣的朋友可以过来看看

查看详情

由state - 元素值控制的值绑定到状态变量
需要事件处理程序 - 要更新状态，您需要事件处理程序
可预测 - 由于组件状态代表输入值，因此组件是可预测的且易于调试
react 处理输入数据，不依赖 dom 来跟踪当前输入值

import react, { usestate } from 'react';

function controlledform() {
  const [value, setvalue] = usestate('');

  const handlechange = (event) => {
    setvalue(event.target.value);
  };

  return (
    <form>
      <input 
        type="text" 
        value={value} 
        onchange={handlechange} 
      />
    </form>
  );
}

登录后复制

不受控制的组件：react 组件，其中 dom 本身处理表单元素的状态。 react 通过 ref 访问输入值，ref 在内部存储自己的状态，并且您可以在需要时使用 ref 查询 dom 以查找其当前值。这有点像传统的 html。

特点

由 dom 控制的值 - 输入字段的值未绑定到状态变量。
使用 ref 访问值或在需要时获取输入元素的值
如果您不需要实时控制输入，它们的设置会更简单。
适合不需要react state来控制输入的场景。

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Input Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

登录后复制

这是受控组件和非受控组件之间的比较表：
React 中的受控组件与非受控组件