反应受控/不受控组件

在 React 中，处理表单输入主要有两种方法：

• 受控组件
• 不受控制的组件

受控组件提供更多的控制和验证，而不受控组件更简单，对于间歇性值访问的基本形式有用。

受控组件

这些是表单输入，其值由 React State 控制。每当输入的值发生变化时，状态变量就会更新，并且输入的值是通过 value 属性显式设置的。

onChange 事件处理程序用于更新状态。

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

     const handleChange = (e) => {
          setName(e.target.value);
     }

     return(
          <input
               type="text"
               value={name}
               onChange={handleChange}
          />
     );
}

在上面的示例中，name 状态变量控制输入字段的值。每当输入值发生变化时，handleChange函数都会更新名称状态，并且输入值通过 value 属性设置为名称状态变量的当前值。

不受控制的组件

不受控制的组件是在内部管理其状态的表单输入，而不是由 React State 控制。您可以在提交表单后或在需要时使用 ref 访问输入的当前值。

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

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

在上面的示例中，inputRef 用于为 input 字段创建 ref。 handleSubmit 函数使用 inputRef.current.value 访问输入的当前值。可以实现表单提交逻辑以根据需要使用输入值。

以上是反应受控/不受控组件的详细内容。更多信息请关注PHP中文网其他相关文章！