在React中使用形式

處理用戶輸入幾乎是任何應用程序的基礎，在Web開發的世界中，HTML表單是該任務的標準工具。 如果您是新手反應，那麼整合形式似乎令人生畏。本文提供了一個清晰簡潔的指南，以涵蓋React中的形式，涵蓋基本技術和高級技術。

鍵概念

• 未控制的輸入：這些是最簡單的方法。 React不會跟踪輸入的狀態；相反，您可以在提交過程中直接從DOM元素訪問值。 這適用於非常簡單的形式。
受控輸入：> 實時驗證：>受控組件允許輸入有效性作為用戶類型的即時反饋，從而增強了用戶體驗。
• >第三方庫：圖書館（如新鮮的簡化表單管理），尤其是用於復雜形式，減少樣板代碼。
• 不受控制的輸入：一種基本方法
>

>不受控制的輸入槓桿參考訪問基礎DOM節點。以下是功能組件中的外觀：

對於類組件，

>在構造函數中使用。 雖然簡單地，但不受控制的輸入缺乏其受控對應物的特徵。

>

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

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>
  );
}

> React.createRef() 在需要實時驗證或動態形式行為時，未控制輸入的局限性變得顯而易見。

受控輸入：增強控制

受控的輸入在React組件中保持狀態。輸入的更改更新狀態，狀態更改更新輸入。

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>
  );
}

>

此圓形數據流提供了實現的能力：>

實時驗證：

提供有關輸入正確性的即時反饋。

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} />
    );
  }
}

>輸入格式：

動態應用格式（例如，貨幣，電話號碼）。

• 有條件渲染：基於輸入值的顯示/隱藏元素。
• >動態輸入生成：基於用戶交互的輸入添加輸入。
• 驗證：實時反饋
• >受控輸入啟用連續驗證。 這是信用卡驗證的簡化示例（使用假設函數）：>

表格庫：簡化開發

圖書館（如新鮮）可以顯著減少樣板。 這是一個簡單的例子：

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>
  );
}

這些圖書館處理州管理，驗證和提交，使開發更有效。

結論

理解受控和不受控制的輸入對於在React中的有效形式處理至關重要。 儘管不受控制的輸入適合簡單方案，但受控輸入提供了大多數應用程序所需的靈活性和功率。 考慮使用表單庫來簡化複雜形式的開發。 請記住，通過清晰的反饋和錯誤處理來確定用戶體驗的優先級。

以上是在React中使用形式的詳細內容。更多資訊請關注PHP中文網其他相關文章！