React特征Form格式

时间:2022-09-29 Flag还是要立的人气:0

Form 样式

首先来看一个简单Form, 式样如下

import * as React from 'react';
const LoginForm = () => {
  return (
    <form>
      <div>
        // Notice: 这里要用htmlFor，相当于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指令，并设置onSubmit事件触发，具体如下

(关于用户输入View => App单向数据流，可参考相关文章 - 学习React的特征（一） - 单向数据流

import * as React from 'react';
const LoginForm = () => {
   // handleSubmit here
  const handleSubmit = (e) => {
    // preventDefault用于防止部分浏览器一些默认的不必要的行为
    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 };

接着，进一步获取用户的输入，可通过e.target.elements来抓取

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

屏幕显示如下

点击Submit, 显示如下

React hook

或许用React hook更简洁优雅些 , 引入useState管理email, password状态

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

到这里一个React Form雏形基本完成，当然Form遇到的问题远不止这些，后续会再进一步探讨Form数据管理，验证等方案

加载全部内容