在React中使用形式

处理用户输入几乎是任何应用程序的基础，在Web开发的世界中，HTML表单是该任务的标准工具。 如果您是新手反应，那么整合形式似乎令人生畏。本文提供了一个清晰简洁的指南，以涵盖React中的形式，涵盖基本技术和高级技术。

键概念

• 未控制的输入：这些是最简单的方法。 React不会跟踪输入的状态；相反，您可以在提交过程中直接从DOM元素访问值。 这适用于非常简单的形式。
受控输入：> 实时验证：>受控组件允许输入有效性作为用户类型的即时反馈，从而增强了用户体验。
• >第三方库：库，例如新鲜的简化表单管理，尤其是对于复杂的形式，减少样板代码。
• 不受控制的输入：一种基本方法
>

>不受控制的输入杠杆参考访问基础DOM节点。以下是功能组件中的外观：

对于类组件，

>在构造函数中使用。 虽然简单地，但不受控制的输入缺乏其受控对应物的特征。

>

>示例：登录表格（未控制）

<code class="language-javascript">function SimpleForm() {
  const nameEl = React.useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(nameEl.current.value);
  };

  return (
    <form onsubmit="{handleSubmit}">
      <label htmlfor="name">Name:</label>
      <input type="text" ref="{nameEl}" id="name">
      <button type="submit">Submit</button>
    </form>
  );
}</code>

> React.createRef() 在需要实时验证或动态形式行为时，未控制输入的局限性变得显而易见。

受控输入：增强控制

受控的输入在React组件中保持状态。输入的更改更新状态，状态更改更新输入。

<code class="language-javascript">function LoginForm() {
  // ... (refs for username, password, rememberMe) ...

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      username: nameEl.current.value,
      password: passwordEl.current.value,
      rememberMe: rememberMeEl.current.checked,
    };
    // ... (submit data) ...
  };

  return (
    <form onsubmit="{handleSubmit}">
      {/* ... (input fields) ... */}
    </form>
  );
}</code>

>

此圆形数据流提供了实现的能力：>

实时验证：

提供有关输入正确性的即时反馈。

<code class="language-javascript">class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' };
  }

  handleInput = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <input type="text" value="{this.state.name}" onchange="{this.handleInput}">
    );
  }
}</code>

>输入格式：

动态应用格式（例如，货币，电话号码）。

• 有条件渲染：基于输入值的显示/隐藏元素。
• >动态输入生成：基于用户交互的输入添加输入。
• 验证：实时反馈
• >受控输入启用连续验证。 这是信用卡验证的简化示例（使用假设函数）：>

表格库：简化开发

图书馆（如新鲜）可以显着减少样板。 这是一个简单的例子：

<code class="language-javascript">function SimpleForm() {
  const nameEl = React.useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(nameEl.current.value);
  };

  return (
    <form onsubmit="{handleSubmit}">
      <label htmlfor="name">Name:</label>
      <input type="text" ref="{nameEl}" id="name">
      <button type="submit">Submit</button>
    </form>
  );
}</code>

这些图书馆处理州管理，验证和提交，使开发更有效。

结论

理解受控和不受控制的输入对于在React中的有效形式处理至关重要。 尽管不受控制的输入适合简单方案，但受控输入提供了大多数应用程序所需的灵活性和功率。 考虑使用表单库来简化复杂形式的开发。 请记住，通过清晰的反馈和错误处理来确定用户体验的优先级。

以上是在React中使用形式的详细内容。更多信息请关注PHP中文网其他相关文章！