react-form条件渲染

最新推荐文章于 2024-08-12 09:36:08 发布
最新推荐文章于 2024-08-12 09:36:08 发布
阅读量312 收藏
点赞数
分类专栏： html react 文章标签： react html5 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/love_521_/article/details/123699206
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>form条件渲染</title>
    <style>
        .female {
            color: deeppink;
        }
        .male {
            color: blueviolet;
        }
    </style>
</head>
<body>
<div id="app"></div>
<script src="./lib/babel.min.js"></script>
<script src="./lib/react.development.js"></script>
<script src="./lib/react-dom.development.js"></script>
<script type="text/babel">
    const {Component} = React;
    const people = [
        {
            id: 1,
            name: '罗小黑',
            gender: '男',
        },
        {
            id: 2,
            name: '碧瑶',
            gender: '女',
        },
        {
            id: 3,
            name: '张小凡',
            gender: '男',
        },
    ];

    class Todo extends Component {
        // 在react中为了和关键字class作区分，使用className来绑定样式名
        render() {
            console.log(this.props);
            return (
                <div>
                    <h1 className={this.props.p.gender == '男' ? 'male' : 'female'}>{this.props.p.name}</h1>
                    <p>{this.props.p.gender == '男' ? '这是一个男性' : '这是一个女性'}</p>
                </div>
            )
        }

    }

    class App extends Component {
        render() {
            return (
                <div>
                    <h1> form条件渲染 </h1>
                    {people.map(item => (
                        <Todo key={item.id} p={item}/>
                    ))}
                </div>
            );
        }
    }

    ReactDOM.render(<App/>, document.getElementById('app'));
</script>
</body>
</html>

success demo
在这里插入图片描述

love_521_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react条件渲染
weixin_54012475的博客
08-29 218
在React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，只渲染对应状态下的部分内容。 React中的条件渲染和javascript中的一样，使用javascript运算符if或者条件运算符去创建元素来表现当前的状态，然后让React根据他们来更新UI。 使用if…else…语句 class App extends React.Component { state = { isLogin: true } logout = () => { this
React中的条件渲染
Y974066017的博客
03-21 955
方法1. state={age:18} //条件渲染 方法1 promtWelcome(){ if(this.state.age>=18){ return(<div>已经18岁</div>) }else{ return(<alert>未成年</alert>) } } render() { return ( <div>{this
react-metaform:一个用于从元数据中动态生成React表单的库
04-16
React元 该项目目前已过时。 我现在正在。 React-metaform是一个库，用于基于元数据动态生成表单。 这对于创建以数据为中心的业务应用程序特别有用，在该应用程序中，模式是灵活的，需要存储在数据库中。 这在表单是动态的且不能进行硬编码的其他情况下也很有用。 该项目类似于 。 Alpha版本免责声明 React-metaform正在积极开发中。 API将发生变化，并且可能仍无法按预期工作。 如果发现任何问题，请。 我会尽力修复它。 这些是的。 演示版 您可以在查看。 文件 。 正在安装 目前， react-metaform仅支持npm 。 。 安装： npm install react-metaform 使用 MetaForm（来源） 主要的React组件。 import MetaForm from 'react-metaform/lib/MetaForm';
React基础语法的学习---4.渲染，组件，表单绑定和操作DOM
mlayc的博客
03-18 200
【代码】React 基础语法的学习---渲染。
React 基础（二）
fwk19840301的博客
05-03 1984
Ant Design of React常用的一些组件Table,Modal,Pagination,Input,Button,Radio,Select,messageTable参数说明类型默认值bordered是否展示外边框和列边框booleanfalsecolumns表格列的配置描述，具体项见下表ColumnProps[]-components覆盖默认的 table 元素object-dataSo...
react的条件渲染(或者组件渲染)五种方式 --开发基础总结
qq_44472790的博客
07-14 2631
react开发总结
react使用antd-design动态渲染组件，封装通用modal弹出form表单组件、table组件(传数据出页面)
刘毅鹏的博客
07-31 8817
react使用antd-design封装通用modal弹出form表单组件、table组件并附带1.upload上传图片转base64、2.批量插入excel表格数据 页面展示效果 第一步项目中创建CommonForm.js文件对antd-design中Form组件封装 import { Image, Form, Input, Button, Radio, Select, TimePicker, Checkbox, Upload, message } from "antd"; import Re
react-form-validation:使用渲染道具进行React的表单验证
04-24
React表格验证 表中的内容 用生成的目录 规则-规则和数据之间的关系-使用参数-规则作为数组-规则作为字符串-规则作为对象和...import { Form } from "react-form-validation-render-props" ; class App extends Comp
react-jsonschema-form：一个用于从JSON模式构建Web表单的React组件
02-03
react-jsonschema-form 一个简单的组件，能够使用声明性地构建和定制Web表单。 ··支持的主题文献资料阅读“阅读上的文档。现场游乐场gh页上有一个。贡献阅读我们的以开始使用。学分由BrowserStack支持的测试
react-final-form-arrays:渲染和编辑数组的组件:chequered_flag:React Final Form
05-07
form final-form-arrays用法 :chequered_flag: React Final Form Arrays提供了一种渲染数组的方式 :chequered_flag: React最终形式。 import { Form , Field } from 'react-final-form'import arrayMutators from '...
react-form:用于表单验证的react组件
05-04
React Form 是一个专门为React开发的库，用于处理和验证用户输入的表单数据。它简化了在React应用程序中创建交互式、动态表单的过程，并且提供了强大的验证功能。在这个库的帮助下，开发者可以更加灵活和高效地管理...
react-form-builder-component:React JS的表单构建器包
04-01
import { FormBuilder } from 'react-form-builder-component' ... < FormBuilder> 渲染表格 import { FormRender } from 'react-form-builder-component' ... 将FormBuilder与FormRender结合使用以随时随地预览...
react 使用antd的form表单， 使用getFieldDecorator中的rules进行格式限制以及认证
雷佳佳的博客
08-07 8297
需求： 对输入框中的内容进行校验，不能输入特殊字符，输入内容，必须大于2，小于10位 直接撸代码： <Item> {getFieldDecorator('ApiName', { //设置默认value ...
react学习(60)--ant design中getFieldDecorator
歌谣的博客
07-27 716
<From> <FormItem> //JS代码书写时需要用 { } 包裹起来，不能直接写在代码块中 { getFieldDecorator('userName',{ initialValue:'Jack', rules:[ { required:true, messa.
Ant Design中getFieldDecorator的使用
图解前端的博客
01-29 1万+
原因 在使用ant design进行react项目开发时，我们经常会用到form表单组件，在刚开始使用时，可能会遇到这样一个问题：Warning: You cannot set a form field before rendering a field associated with the value.，这个问题是由于Form 组件中Form.Item的初始值的设置造成的。 解决办法 使用ini...
ant Design表单中getFieldDecorator方法的特殊的用法
管他熙熙攘攘阳关道，我偏要一条独木桥走到黑
11-23 2226
需求： 新建投票信息，点击添加按钮，新增一组问题表单，表单字段名一样（需要Ant的form表单中循环动态渲染formItem），此时getFieldDecorator(id,options)中的id不能在循环中写死，那要如何解决呢？ 解决方案： 1、添加索引区分 form.getFieldDecorator(questionName${index}, {… {questionList.map((question, index) => ( <FormItem label="问
ant design 中 getFieldDecorator 采坑记
weixin_33725807的博客
12-14 3742
1. 坑一：报错：Cannot read property 'getFieldDecorator' of undefined解决方法：Form.create()(Questionary) // 用Form.create()加一层 2. 坑二报错：'form' is missing in props validation react/p...
Ant Design Form表单中getFieldDecorator使用异常总结
热门推荐
云生流长的博客
04-04 7万+
背景：在使用Ant Design Form组件时，Form组件提供了一个create方法，使用form.create()(component)处理之后的component 会接收到一个props.form，使用props.form下的一系列方法，便可以很方便的写出具备自动校验功能的表单。代码如下所示： // 使用 Form.create 处理后的表单具有自动收集数据并校验的功能 const S...
前端要掌握的HTML、CSS、Javascript知识
最新发布
wj0712的博客
08-12 508
前端工程师需要系统掌握HTML、CSS、JavaScript三大核心技术，并熟悉前端生态中的工具和框架。不断学习和实践这些知识，可以提升代码质量和开发效率，适应复杂多变的前端开发需求。
react-router 登录注册代码
06-09
以下是一个简单的 react-router 登录注册代码示例： ```jsx import React, { useState } from 'react'; import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom'; const App = () => { const [isLoggedIn, setIsLoggedIn] = useState(false); const handleLogin = () => { setIsLoggedIn(true); }; const handleLogout = () => { setIsLoggedIn(false); }; const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( isLoggedIn ? <Component {...props} /> : <Redirect to='/login' /> )} /> ); const LoginPage = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = (e) => { e.preventDefault(); // handle login logic here handleLogin(); }; return ( <div> <h2>Login Page</h2> <form onSubmit={handleSubmit}> <div> <label>Username:</label> <input type='text' value={username} onChange={(e) => setUsername(e.target.value)} /> </div> <div> <label>Password:</label> <input type='password' value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <button type='submit'>Login</button> </form> </div> ); }; const RegistrationPage = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const handleSubmit = (e) => { e.preventDefault(); // handle registration logic here handleLogin(); }; return ( <div> <h2>Registration Page</h2> <form onSubmit={handleSubmit}> <div> <label>Username:</label> <input type='text' value={username} onChange={(e) => setUsername(e.target.value)} /> </div> <div> <label>Password:</label> <input type='password' value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <div> <label>Confirm Password:</label> <input type='password' value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} /> </div> <button type='submit'>Register</button> </form> </div> ); }; const HomePage = () => { return ( <div> <h2>Home Page</h2> <button onClick={handleLogout}>Logout</button> </div> ); }; return ( <Router> <div> <nav> <ul> {isLoggedIn ? ( <li> <Link to='/'>Home</Link> </li> ) : null} <li> <Link to='/login'>Login</Link> </li> <li> <Link to='/register'>Register</Link> </li> </ul> </nav> <Switch> <Route path='/login'> <LoginPage /> </Route> <Route path='/register'> <RegistrationPage /> </Route> <PrivateRoute path='/' component={HomePage} /> </Switch> </div> </Router> ); }; export default App; ``` 上面的代码定义了三个页面：登录页面、注册页面和主页。登录和注册页面都包含一个表单，用于输入用户名和密码（或确认密码）。当用户提交表单时，可以在 `handleSubmit` 函数中处理登录或注册逻辑，并根据结果设置 `isLoggedIn` 状态。主页只有在用户已登录时才能访问，否则将重定向到登录页面。 私有路由组件 `PrivateRoute` 可以将一个组件包装起来，以便只有在用户已登录时才渲染该组件。如果用户未登录，则将重定向到登录页面。在 `Switch` 中，我们可以使用 `PrivateRoute` 来保护主页组件，确保只有已登录用户才能访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值