快捷導(dǎo)航

React特征學(xué)習(xí)之Form格式示例詳解

更新時(shí)間：2022年09月17日 15:25:35 作者：Flag還是要立的

這篇文章主要為大家介紹了React特征學(xué)習(xí)之Form格式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Form 樣式

首先來(lái)看一個(gè)簡(jiǎn)單Form, 式樣如下

import * as React from 'react';
const LoginForm = () => {
  return (
    <form>
      <div>
        // Notice: 這里要用htmlFor，相當(dāng)于id  
        <label htmlFor="email">Email</label>
        <input id="email" type="text" />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input id="password" type="password" />
      </div>
      <button>Submit</button>
    </form>
  );
};
export { LoginForm };

屏幕顯示如下

若給以上Form加入用戶輸入, 可引入handleSubmit指令，并設(shè)置onSubmit事件觸發(fā)，具體如下

(關(guān)于用戶輸入View => App單向數(shù)據(jù)流，可參考相關(guān)文章 - 學(xué)習(xí)React的特征（一） - 單向數(shù)據(jù)流

import * as React from 'react';
const LoginForm = () => {
   // handleSubmit here
  const handleSubmit = (e) => {
    // preventDefault用于防止部分瀏覽器一些默認(rèn)的不必要的行為
    event.preventDefault();
  };
  return (
    // onSubmit here
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" type="text" />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input id="password" type="password" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
export { LoginForm };

接著，進(jìn)一步獲取用戶的輸入，可通過(guò)e.target.elements來(lái)抓取

import * as React from 'react';
const LoginForm = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    // 獲取input elements 
    const email = e.target.elements.email.value;
    const password = e.target.elements.password.value;
    alert(email + ' ' + password);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" type="text" />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input id="password" type="password" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
export { LoginForm };

屏幕顯示如下

點(diǎn)擊Submit, 顯示如下

React hook

或許用React hook更簡(jiǎn)潔優(yōu)雅些 , 引入useState管理email, password狀態(tài)

import * as React from 'react';
const LoginForm = () => {
  // Add hooks here
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const handleEmail = (e) => {
    setEmail(e.target.value);
  };
  const handlePassword = (e) => {
    setPassword(e.target.value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    alert(email + ' ' + password);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="text"
          value={email}
          onChange={handleEmail}
        />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={password}
          onChange={handlePassword}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
export { LoginForm };

到這里一個(gè)React Form雛形基本完成，當(dāng)然Form遇到的問(wèn)題遠(yuǎn)不止這些，后續(xù)會(huì)再進(jìn)一步探討Form數(shù)據(jù)管理，驗(yàn)證等方案

以上就是React特征學(xué)習(xí)之Form格式示例詳解的詳細(xì)內(nèi)容，更多關(guān)于React特征Form格式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: