文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React特征学习之Form格式示例详解

2024-04-02 19:55

关注

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数据管理,验证等方案

以上就是React特征学习之Form格式示例详解的详细内容,更多关于React特征Form格式的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯