如何在单独的页面react.js语义ui中包含表单验证
在单独的页面中使用React.js语义UI包含表单验证，可以按照以下步骤进行：
- 安装React.js语义UI库：首先，确保已经安装了React.js和相关的依赖。然后，通过npm或yarn安装React.js语义UI库。可以使用以下命令进行安装：
- 安装React.js语义UI库：首先，确保已经安装了React.js和相关的依赖。然后，通过npm或yarn安装React.js语义UI库。可以使用以下命令进行安装：
- 或
- 或
- 导入所需的组件：在你的React组件文件中，导入所需的React.js语义UI组件。例如，如果你需要使用表单组件和验证规则，可以这样导入：
- 导入所需的组件：在你的React组件文件中，导入所需的React.js语义UI组件。例如，如果你需要使用表单组件和验证规则，可以这样导入：
- 创建表单组件：在你的React组件中，创建一个表单组件，并使用React.js语义UI提供的表单组件和验证规则。例如，你可以使用
Form和Input组件来创建一个包含表单验证的表单： - 创建表单组件：在你的React组件中，创建一个表单组件，并使用React.js语义UI提供的表单组件和验证规则。例如，你可以使用
Form和Input组件来创建一个包含表单验证的表单： - 添加表单验证规则：使用React.js语义UI提供的验证规则来验证表单字段。例如，你可以在
Input组件上使用pattern属性来添加正则表达式验证规则： - 添加表单验证规则：使用React.js语义UI提供的验证规则来验证表单字段。例如，你可以在
Input组件上使用pattern属性来添加正则表达式验证规则： - 处理表单提交：在表单的提交处理函数中，根据需要进行表单数据的验证和处理。你可以使用React.js语义UI提供的验证规则和表单状态来进行验证和处理逻辑。
这样，你就可以在单独的页面中使用React.js语义UI包含表单验证了。记得根据实际需求，适当调整和扩展代码。如果需要更多的React.js语义UI组件和验证规则，可以查阅React.js语义UI官方文档以获取更多信息和示例代码。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/product/mu
相关·内容
1回答
从React中将Redux与父道具连接起来
reactjs、redux、react-redux、redux-form
几天来，我一直试图解决redux的连接和父组件的道具之间的问题。我在子组件中使用redux，同时使用道具来调用handlechange函数和父组件的状态。
当在子组件中使用connect不能正确更新this.props.args时，但是在父组件中没有问题。然后，我有一个验证，以便当所有字段完成时，我的提交按钮将被激活。
另外，在父组件中实现一个状态和一个函数，以检测鼠标的移动并将其传递给子组件，为了消除一些疑问，令人惊讶的是，在这种情况下，如果它检测到this.props.mouse中的变化，更罕见的是，当我填充一个字段，然后移动鼠标时，如果它被更新，我的this.props.args就在子组
浏览 0提问于2018-10-03得票数 0
回答已采纳
2回答
从收音机和复选框中选择的选项不传递数据。
javascript、angular、reactjs、react-native、semantic-ui
我试图通过多页提出一组问题，所以我需要从第1页和第2页中选择的答案传递到第3页，因为第3页就像确认页一样，它将显示过去2页中所有选定的答案。
界面显示得很成功，嗯，很简单，但似乎根本没有数据传递，哦，问题的类型是无线电和复选框，所以对我来说有点困难，因为这两种类型对我来说是新的(如果文本区域或正常输入很容易)。
这是mainpage.jsx
// MainForm.jsx
import React, { Component } from 'react';
import AircondQuantity from './AircondQuantity';
impor
浏览 1提问于2020-01-05得票数 0
回答已采纳
4回答
单击“附加表单”按钮不会触发表单提交
javascript、reactjs、button、onsubmit、semantic-ui-react
考虑以下例子：
import React, { Component } from 'react'
import { Form } from 'semantic-ui-react'
class FormExample extends Component {
state = {}
handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleSubmit = () => this.setState({ email: '', na
浏览 0提问于2019-08-05得票数 2
回答已采纳
4回答
使用React将提交的表单值保存到JSON文件中
javascript、json、forms、reactjs
我正在尝试在react中创建一个表单，它将在提交时使用表单中的值更新JSON文件。(最终的结果是，这将在每次提交表单时在JSON文件中创建一个数据数组，然后可以用来填充应用程序中其他地方提交的结果的“列表”)。 表单本身运行正常，但每次我按下submit时都会收到错误消息："TypeError: fs.writeFile不是一个函数“ import React, { Component } from "react";
import { Form, Button } from 'semantic-ui-react';
import jsonfile fr
浏览 214提问于2017-08-29得票数 3
回答已采纳
1回答
受控表单字段不符合步骤
reactjs、forms、semantic-ui-react
受数字类型控制的表单字段不符合指定的步骤。每次点击都会增加两次步长。
我已经尝试更新到最新版本的semantic-ui-react。我试过移除“control”道具，但它是必需的。
import React from 'react';
import {
Form,
Input,
} from 'semantic-ui-react';
function CreateProduct() {
const [loading, setLoading] = React.useState(false);
const [disabled, setDisable
浏览 0提问于2019-10-19得票数 0
3回答
响应-初始化状态时的“意外标记”
reactjs、semantic-ui
我反应很新，所以请原谅这个问题中的任何错误！
目前，我正在尝试使用一个基本的登录表单：
import React, { Component } from 'react';
import { Input, Form, Button } from 'semantic-ui-react'
class LoginForm extends Component {
state = { username: '', password: '' }
handleChange = (e, { name, value }) =>
浏览 0提问于2018-08-21得票数 1
回答已采纳
1回答
如何在正确填写表单时使用Axios提交表单数据
reactjs、validation、post、react-hooks、axios
背景信息：
因此，我正在进行一个项目，其中包括将表单数据发送到数据库。现在，我只是使用Mock API在.NET中设置数据库之前启动并运行所有东西。
自定义钩子和Validator信息：
我使用了一个带有两个主要函数的自定义钩子：handleChange() (负责在主组件上设置新值)、CreateUser和handleSubmit()，(调用自定义验证器(validateNewUser)来检查表单中的错误)。
我的钩子和验证器工作正常，但我对Axios的post请求有问题。我能够将我的Axios post请求放在我的自定义钩子中，并且它按预期工作，但是只有在表单正确填写后，我才能知道如何将表
浏览 11提问于2022-11-27得票数 0
回答已采纳
1回答
提交表单将返回代理对象，而不是Reactjs中的表单数据。
reactjs、redux、form-submit
我正在使用Reactjs中的语义-ui创建一个登录表单。请查找以下代码：
登录表单本身：
import React from 'react';
import { Form, Button } from 'semantic-ui-react';
const LoginPage = ({ email, password, handleChange, handleSubmit, errors }) => (
<Form onSubmit={handleSubmit}>
<Form.Field>
浏览 4提问于2017-09-24得票数 0
2回答
semanticui在变更事件上对文本区域作出反应
javascript、reactjs、semantic-ui-react
(关于SE的第一个问题，将尝试遵守社区规则和指南-在Google上搜索了一些内容，但是找不到答案)
我正在使用semantic-ui-react模块来用textarea实现一个表单。
函数构造函数
constructor(props) {
super(props);
this.state = {
loading: false,
email: '',
request: 'your request',
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this
浏览 1提问于2018-04-20得票数 2
回答已采纳
2回答
如何为react js表单提供验证
reactjs
如何为react js表单提供验证。
我采用了两个字段的形式。如果启用了两个字段，则只需启用保存按钮。
import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'
const FormExampleForm = () => (
<Form>
<Form.Field>
<label>First Name</label>
<input placeholder=&
浏览 4提问于2017-05-16得票数 4
在chrome工具中，我在提交表单的按钮上设置了一个断点。当我键入输入字段时，每次击键都会触发handleSubmit断点并正确更新状态onChange，并在正确的情况下启用提交按钮，但当我实际单击Submit时，不会发生任何事情。它不会触发断点或运行handleSubmit。我的服务器或控制台中没有错误。
以下是组件：
import React, { Component } from 'react';
import { Form, Button, Container } from 'semantic-ui-react';
import { connect }
浏览 0提问于2019-01-22得票数 0
回答已采纳
1回答
我使用了语义UI库和react，并在这里遵循了它们的表单输入示例
(顺便说一句，在最底层的那个)
表单可以很好地更新它们的文本，并且我已经测试了状态是否在更新，它们确实在更新！但是，当我想要设置提交/宽度，高度，颜色状态为其他状态时，它不起作用！它在控制台中给出了这个警告。
./src/components/Holder/HolderInput.jsx
Line 33: 'submittedWidth' is assigned a value but never used no-unused-vars
Line 34: 'submittedHeight
浏览 2提问于2018-02-16得票数 0
回答已采纳
1回答
语义-用户界面反应语法错误:相邻的JSX元素必须包装在一个封闭的标签中。
javascript、reactjs、react-redux、semantic-ui、semantic-ui-react
我正在使用语义-ui-react为一个新用户构建一个表单：
import React from 'react';
import { Form } from 'semantic-ui-react';
import {createUser} from '../../../actions/userAction';
class UserAddModalForm extends React.Component {
constructor(props) {
super(props);
}
handleSubmit(event, pro
浏览 0提问于2017-10-06得票数 0
回答已采纳
2回答
我不想节省的数据传送器返回时间
javascript、reactjs、rest、google-sheets、datepicker
我正在尝试一个很小的应用程序，下面是这个React示例：
如何重现这个问题？--我按照上面链接上的两/三个指令创建了这个项目。即：
npx create-react-app react-googlesheets
npm install semantic-ui-react semantic-ui-css
在index.js中添加以下内容
import 'semantic-ui-css/semantic.min.css'
npm install axios
然后，我在我的App.js中使用了以下内容
import React, { useState } from 'reac
浏览 2提问于2021-05-05得票数 0
回答已采纳
4回答
React Sementic不停地说："ReferenceError: jQuery未定义“
javascript、jquery、reactjs、semantic-ui
我是一个新的反应，我有一个关于语义UI的问题。
下面是一个教程，其中我必须在App.js中使用语义UI的头组件，包括
import { Header } from 'semantic-ui-css'
但是，每当页面使用此代码进行编译时，它都会返回如下错误消息：
ReferenceError: jQuery is not defined
./node_modules/semantic-ui-css/semantic.js
node_modules/semantic-ui-css/semantic.js:497
494 | });
495 |
49
浏览 0提问于2020-03-12得票数 6
2回答
“父模式”中的“表单提交”按钮
reactjs、forms、modal-dialog、semantic-ui、semantic-ui-react
我有一个语义UI表单：
import {Form} from 'semantic-ui-react';
<MyForm>
<Form onSubmit={_handleSubmit}>
<Form.Input name="myInput" label="My Label" value="" />
<Form.Group>
<Form.Button>Submit</Form.Button>
浏览 2提问于2019-09-24得票数 1
回答已采纳
2回答
集成和redux-form
javascript、reactjs、redux、semantic-ui、redux-form
我正在使用redux表单(可怕的libs)来处理我的表单& React应用程序中的redux商店。所有东西都工作得很好，重要的表单和嵌套的json输出。
我正在尝试将React-Semantic-UI组件与redux表单结合使用。我在文档中搜索了一下，如何将定制组件与redux表单集成起来，然后我们开始：看起来很完美。
但是当我把语义和这个集成在一起的时候，它就起作用了。
这是我对伪代码的简单测试：
const TestComponent = props => (
<Form>
<Field name="dropdownTest" co
浏览 4提问于2017-02-08得票数 14
回答已采纳
2回答
使用重定向时，我的状态不会更新，因此我永远不会重定向
javascript、reactjs、redux、react-router
背景
我有一个带有表单的react/redux项目。我希望它重定向到我的网站上的另一个页面后，表单被提交。
在这里研究这个问题时，我尝试了、和，以及github上的其他解决方案，但都没有很好的效果。大多数解决方案都处理状态更改，一些使用了withRouter。我不确定我错过了什么。
代码
这是我的表格。
import React from 'react'
import {connect} from 'react-redux'
import {addProgram} from '../../actions/addProgram'
import {F
浏览 2提问于2019-08-26得票数 0
2回答
获取语义用户界面中的表单值
reactjs、redux、semantic-ui-react
这是我的表格：
import React from 'react'
import { Form, Button } from 'semantic-ui-react'
const CreatePostForm = ({ onSubmit }) =>
<Form onSubmit={onSubmit}>
<Form.Input name='user' label='user' placeholder='Enter user name' />
<Form.Inpu
浏览 4提问于2021-04-28得票数 0
回答已采纳
1回答
./src/Components/ContactForm.jsx第37行：'sendEmail‘未定义为no-undef
javascript、reactjs、semantic-ui
如果我的帖子格式不佳，我很抱歉，我对JS/React或Stack溢出都没有经验
这是我在两天内的第7次迭代，试图使我的联系人表单完全工作。我已经工作到了一点，在提交电子邮件中没有发送的唯一项目是TNC和促销盒。
我需要复选框发送、true或false，这取决于它们是否被选中。如果我能将真假转换为“是”或“否”的话，则加分。
我所犯的错误是
Failed to compile.
./src/Components/ContactForm.jsx
Line 37: 'sendEmail' is not defined no-undef
这是受影响的线路
<Form o
浏览 7提问于2021-09-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
