React特征学习之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 };

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

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

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