React:如何使用onSubmit更改状态？
在React中，可以使用onSubmit事件来更改状态。onSubmit事件通常与表单元素一起使用，当用户提交表单时触发。
要使用onSubmit事件更改状态，可以按照以下步骤操作：
- 在React组件的构造函数中初始化状态。例如，创建一个名为
FormComponent的组件，其中包含一个状态变量formData： - 在React组件的构造函数中初始化状态。例如，创建一个名为
FormComponent的组件，其中包含一个状态变量formData： - 在表单中添加一个
onSubmit事件处理程序。可以通过将其添加到<form>元素上来实现。该事件处理程序将在表单提交时触发： - 在表单中添加一个
onSubmit事件处理程序。可以通过将其添加到<form>元素上来实现。该事件处理程序将在表单提交时触发： - 在组件中创建
handleSubmit方法，并将其作为事件处理程序传递给onSubmit属性。该方法将更新状态： - 在组件中创建
handleSubmit方法，并将其作为事件处理程序传递给onSubmit属性。该方法将更新状态： - 在表单中添加适当的表单元素。例如，可以添加一个文本框和一个提交按钮：
- 在表单中添加适当的表单元素。例如，可以添加一个文本框和一个提交按钮：
这样，当用户在文本框中输入数据并点击提交按钮时，onSubmit事件将触发handleSubmit方法，从而更新组件的状态并执行其他操作。
推荐的腾讯云产品：无
参考链接：
- React官方文档：https://reactjs.org/docs/forms.html
相关·内容
1回答
测试反应形式内部提交
、、、、
我有这样的组成部分：
function Form() {
const [value, setValue] = useState('');
const hanleSubmit = (ev) => {
ev.preventDefault();
console.log('submit', value);
}
return (
<form onSubmit={props.onSubmit}>
<input type="text" value={value} onChange={e
浏览 8提问于2021-12-14得票数 0
1回答
我使用的是，而不是react原生TextInput。
一些问题：
1)如何删除右/左/顶边框？
2)如何更改标签的颜色/字体大小(这是电话号码)？
我试着改变(inputContainerStyle，labelTextStyle，titleTextStyle)，但没有影响。
<OutlinedTextField
autoCorrect={false}
enablesReturnKeyAutomatically={true}
label='Phone number'
keyboardType='phone-pad'
浏览 4提问于2020-03-29得票数 0
2回答
我正在尝试做一个反应应用，在那里我有一个表单，当我提交时，我想显示的数据在屏幕上。我也在使用redux。我对所有这些都是陌生的，所以我不知道如何将数据保存到存储区，然后显示它为。
如果有人能告诉我该怎么做。我想我应该保存表单中的数据，把它传递给商店，但是不知道怎么做。
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as acti
浏览 5提问于2020-03-01得票数 0
回答已采纳
对不起，如果我的问题没有解释properlY，我在反应，我需要你们的帮助，谢谢。为了详细解释它，我的编辑状态得到了完美的更新，但问题是当我试图删除它时，它是删除了最后的附加值。我知道我必须在单击“删除”按钮时更新状态，但我不知道如何更新。少帮忙会有帮助的。这是整个密码。请告诉我哪里出了问题，并给出了解决办法。app.js
import React, { Component } from 'react';
import Input from './input_bar';
import TaskList from './tasklist';
exp
浏览 1提问于2018-09-01得票数 2
回答已采纳
2回答
我正在构建一个显示登录表单的原型。submit事件触发从数据库中进行查找。如果查找失败，我希望将表单更改为a)显示错误消息，b)丢弃以前输入的用户ID和密码。
我的reducer更改了Redux中的状态，但我不确定如何将数据传输回组件状态。
这是我的表格：
import React from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
export class LoginForm extends React
浏览 21提问于2019-03-29得票数 1
我是react的新手，我正在尝试在react Hook表单中使用SliderComponent，但我似乎无法完全理解控制器是如何工作的。 这是我使用react-input-slider的SliderComponent export default function SliderComponent(props) {
const { axis, xmax, xmin, xstep, onChange } = props;;
return (
<div>
<Slider
axis={axis}
x={valu
浏览 18提问于2021-05-11得票数 1
回答已采纳
我理解这可能是基本的，因为我是新的反应，但我试图只是简单地记录输入的价值，无论何时它被更改或提交。
以下是代码：
import React from "react";
const App = () => {
const onNameChange = (nameInput) => {
console.log("name change Fn", nameInput);
};
return (
<>
<form onSubmit={onNameChange(this.value)}>
浏览 4提问于2020-11-09得票数 0
回答已采纳
我有一个应用程序：
import React, { useState } from "react";
const App = () => {
const [cars, setCars] = useState([]);
const [car, setCar] = useState({
name: "",
color: ""
});
const handleChange = e => {
setCar({
...car,
[e.target.name]: e.targe
浏览 7提问于2020-08-09得票数 0
我从表单组件中获取数据，并试图用这些数据设置我的app组件的状态。
但是，state.data是一个空对象，不更新数据。在将模型数据设置为检查是否存在之前，我将对其进行控制台日志记录。它们是模型中的数据。
import React, { Component, Fragment } from "react";
import Form from "../components/Form";
import product from "./product.json";
class App extends Component {
constru
浏览 1提问于2018-11-25得票数 4
回答已采纳
1回答
我是React.js的新手，最近我学到了反应中的受控输入。
代码：
下面是我所做的一个示例实现：
import React, { useState } from 'react';
const MyForm = () => {
console.log('rendered'); // Line 5
const [text1, setText1] = useState('');
const [text2, setText2] = useState('');
const onSubmit =
浏览 2提问于2020-07-23得票数 2
回答已采纳
1回答
import React from 'react';
import {
View,
Text,
Button,
TextInput,
StyleSheet
} from 'react-native';
const username = null;
const SetupForm = ({onSubmit}) => {
this.handleUsernameInput = (text) => {
username = text;
}
this.handleSetupSu
浏览 6提问于2017-08-24得票数 0
回答已采纳
3回答
我有一个应该更新初始状态的表单，我遵循了许多教程，我的代码看起来和它们一样，但由于某种原因，它不会更新状态。 import React, { Component } from 'react';
class Create extends Component{
constructor(props){
super(props);
this.state = {
title: "",
body: "",
error: ""
}
}
浏览 28提问于2021-01-07得票数 0
回答已采纳
我有一个react组件，可以显示数据库中的所有书籍。然而，当我第一次点击这个按钮时，它不会列出所有的书，但是如果我再次点击这个按钮，它会列出所有的书，我怎么让它只点击一次就把所有的书都列出来了呢？
import PropTypes from "prop-types";
import {getBook} from "../actions/bookActions";
import {connect} from "react-redux";
import {Container} from "@material-ui/core";
imp
浏览 12提问于2021-09-24得票数 0
回答已采纳
在组件中 import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ProfileForm from '../common/ProfileForm';
import { createProfile } from '../../actions/profileActions';
import { withRouter } from
浏览 12提问于2019-02-06得票数 0
回答已采纳
class BankForm extends Component {
constructor() {
super();
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(e) {
e.preventDefault();
console.log(e.target.price.value);
}
render() {
return (
<AddForm onSubmit={this.onSubmit} />
);
浏览 0提问于2017-01-10得票数 0
回答已采纳
我对此反应很新，如果这是个愚蠢的问题，请原谅。
我正在尝试使用Meteor和React提交我的表单。当我单击submit按钮时，我会得到未定义的未定义的，但这只是因为我不能在输入字段中键入。我搞不懂。这是我的密码。
目前，onSubmit所做的唯一的事情就是提供一个日志。
export default class AddDeal extends React.Component {
constructor(props) {
super(props);
// Set the state
this.state = {
title: ''
浏览 4提问于2017-04-29得票数 0
回答已采纳
1回答
我对我的反应方式有问题。
如果我在submit按钮上单击两次，那么此时表单将正确提交并将我的各种信息发送到数据库。
问题出在哪里？
import React, { useState } from 'react';
import axios from 'axios';
const Register = () => {
const [username, setUsername] = useState();
const [password, setPassword] = useState();
const onSubmit = (e) =>
浏览 2提问于2020-12-23得票数 1
回答已采纳
我是React.js的新手，我面对一个奇怪的错误，我不知道为什么会发生这种情况，我搜索了，但没有找到任何解决方案。
以下是我的组件代码：
import React, { useState } from "react";
const AddMovie = () => {
const [movie, setMovie] = useState({ title: "", director: "" });
const onChange = (value, filed) => {
setMovie({
[filed]
浏览 5提问于2022-04-12得票数 0
回答已采纳
StackOverflow上的第一次定时器！我正试图模仿我的一个投资组合项目的终端界面。我所设想的终端的方式是，每个终端框都有一个带有几个键/值对的状态对象。理想情况下，当有人将文本输入到终端框输入表单中时，输入将被禁用，并在屏幕上呈现一个新的终端框，其动态响应基于保存在状态中的userInput文本。我被困在那里：
一旦userInput状态被更新，我如何获得一个新的终端框来呈现在屏幕上的前一个框下？
在呈现之前，如何将新呈现的终端框的初始状态设置为默认状态，除非“输出”将被重值到我设置的适当响应？
如何访问前一个终端框中的状态，以便“读取”存储在其中的userInput，以便确
浏览 4提问于2020-08-07得票数 2
1回答
我有一个非常简单的提交表单，我正在使用React-hook-form来实现，我遇到了这个奇怪的问题，当我第一次提交时全局状态没有更新，但第二次提交时它可以工作。下面是我的代码： export default function Enter() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const { state, dispatch } = useContext(Store)
const onSubmit = (data) => {
浏览 14提问于2021-09-13得票数 2
2回答
每当我尝试在props更新后重定向时，我都会得到以下错误：
警告:无法对卸载的组件执行响应状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消useEffect清理函数中的所有订阅和异步任务。
已经试过了：
React.useEffect(() => {
if (props.user) {
props.history.push("/admin/me");
}
}, [props.user]);
而这个(直接在呈现方法中)：
if (props.user) {
return <Redirect
浏览 2提问于2019-03-29得票数 0
一旦一个组件被触摸，然后用户清除输入，默认的行为就是错误继续显示。当输入在触摸后被清除时，如何才能使错误消失？
下面的代码是文档的摘录。
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm();
return (
<form onSubmit={hand
浏览 1提问于2021-05-16得票数 1
回答已采纳
当我提交联系人表单时，它会显示错误，如发送消息时出错。请帮助我，我的代码中有什么错误吗？我是react js的新手。这是我用过的代码。请告诉我这里面有没有逻辑或语法错误。
import React, { FormEvent, ReactElement } from 'react';
import { noop } from 'rxjs';
import { EmailData } from '../../../models/i-email-data';
import { EmailInput, MessageInput, NameInput, S
浏览 7提问于2020-06-08得票数 1
回答已采纳
我有一个关于useState钩子的问题。我们都知道，useState setter方法没有立即反映更改。例如,
const App = () => {
const [name, setName] = React.useState("");
return (
<React.Fragment>
<form onSubmit={(e) => {
e.preventDefault();
setName("submit");
console.log
浏览 4提问于2022-08-20得票数 1
2回答
我刚开始学习，所以我尝试更改教程代码中的一些行。这是一个表单，它添加了新的标题，但是如果值为=== "“，我希望更改按钮的颜色。我试图找到，但大多数示例使用类，在这个项目中，我想使用函数。
import React, { useState } from 'react'
import { View, StyleSheet, TextInput, Button, Alert } from 'react-native'
export const AddTodo = ({ onSubmit }) => {
const [value, setValue
浏览 2提问于2020-02-23得票数 0
回答已采纳
状态只在下一次击键时更新，但使用以前的状态。屏幕1
单击updateForm ()时，它也是空的，只有在第二次单击之后，状态才会更新。屏幕2
我知道这是异步造成的，但在这种情况下，我不知道如何使用它。
Home.jsx
import React, { useState } from 'react';
import { Form } from '../components/Form/Form';
const Home = () => {
const [dateForm, setDataForm] = useState({});
const upd
浏览 1提问于2020-10-18得票数 0
回答已采纳
我正在尝试为Spring Boot应用程序创建一个前端，我选择了React，但我没有太多使用React或JavaScript的经验。因此，我有一个表单，我试图使用它来发送post请求，但是当我按下submit按钮时，似乎什么都没有发生。我认为这是我的onSubmit处理程序的问题所在，但我不知道它出了什么问题。当我手动发送POST请求时，它工作得很好，所以我不认为是REST API导致了问题。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ax
浏览 0提问于2018-07-23得票数 4
3回答
我遇到了react组件之间的通信问题。我想在组件"ProductNameSave.js“到"readJson.js”之间传递值。来自"ProductNameSave.js“的值来自组件"windowForm.js”。因为这个结构("windowForm.js“-> "ProductNameSave.js”-> "readJson.js")，我认为"ProductNameSave.js“是”thruth的来源“。以下是组件。"windowForm.js“
import React from 're
浏览 10提问于2018-08-16得票数 0
谁能告诉我，在我的主页组件上单击提交后，如何清除所有输入？我试着在subjectForm组件中使用了reset()方法，但是我不是用错了就是不起作用。我还尝试使用setState，并将我的输入恢复为默认状态，该状态为空，但同样不起作用。
我的代码中的所有内容都运行良好，但是每次我提交一个主题时，字段都不会自动清除
这是我的主页组件。
import React from 'react';
import SubjectForm from './SubjectForm';
import {addSubject} from '../act
浏览 0提问于2017-12-10得票数 0
回答已采纳
2回答
当用户单击编辑按钮时，我试图显示模式。我设置了editProject动作。当用户单击“编辑”按钮时，editProject返回true。
但是我们可以将redux状态转化为道具，而不是组件状态。那么，当道具被更改时，我们如何动态更新组件状态呢？
这是EditProjectForm组件
import React from "react";
import {Modal, Button, Form} from "react-bootstrap"
import {connect} from "react-redux";
import {updatePro
浏览 2提问于2019-10-28得票数 0
回答已采纳
1回答
在我通过CreateArticle组件创建了一篇文章(它工作得很好)之后，我只想通过displayName()函数在SearchArticle组件中显示用户在<textarea value={value}>中编写的内容(它的value)。
换句话说，在CreateArticle组件中，当用户在<textarea/>中键入内容，然后单击Submit (这是一个保存用户编写内容的按钮)时，我希望只显示用户在Search Article displayName() function中编写的内容。
我做错了什么?我如何才能纠正它？
这是CreateArticle
import
浏览 1提问于2018-09-26得票数 0
在下面的代码中，我有一个简单的react组件，它有一个包含react-select组件的表单。它首先显示defaultValue，然后提供两个选项供选择。选择后，submit按钮将发送post请求。每件事都很好，问题是我想要恢复Select组件，以显示在提交时单击后的默认值。
import Select from 'react-select';
export class Test extends Component {
this.setState = {
selection: 0,
};
onSelectChange = (e) => {
浏览 3提问于2019-03-31得票数 0
回答已采纳
我正在用useState设置一个状态变量，不管是否单击了recaptcha，但是当我使用setState函数时，我的captcha变量不会传递我的提交，不明白为什么，如果删除setState，captcha变量就会很好地传递给我的onSubmit。如果我删除了setSubmitButton(false)，所有操作都很好，但不太清楚原因。
当我运行setSubmittButton(false)时，captcha是在我的submit函数中定义的，当我没有它时，就会在提交函数中得到正确的captcha值。
import React, { useState } from "react"
浏览 1提问于2020-05-25得票数 1
回答已采纳
我在网上找到了一个关于React.js的教程，但我看到了导师在没有使用setState()函数的情况下改变状态的方式。我在这里询问这是否是一种好的做法。
构造函数：
constructor(props) {
super(props);
this.state = {
uid: uuid.v1(),
name: '',
answers: {
answer1: '',
answer2: '',
answer3: ''
浏览 4提问于2017-08-15得票数 1
2回答
当我点击一个按钮时，我正试图将一个表单显示为弹出窗口。我是一个新的反应对象，我真的不知道从哪里开始。
这是我想要显示的React组件：
import React, {useState} from 'react';
const initialFormValues = {
firstName: '',
lastName: '',
email: '',
phone: '',
message: ''
}
export default function Contac
浏览 3提问于2021-08-26得票数 0
ChangeHandler更新状态罚款。
但是，更新id在onSubmit上的状态似乎并不更新id。
代码是
import { useState } from "react"
export default function Form(props) {
const [userInput, setUserInput] = useState({
name: "",
url: "",
id: ""
})
const ChangeHandler = (e) =>
浏览 8提问于2022-05-22得票数 0
2回答
I有一个应用程序组件和测试组件。i在应用程序和测试组件的呈现方法中都添加了console.log。我可以看到应用控制台只呈现一次，但是测试组件呈现了两次。也是，我在测试组件中有一个具有受控输入的表单，但一旦我开始键入输入字段，.The测试组件就会重新呈现两次。
app组件
import React from "react";
import "./styles.css";
import Test from "../Test";
export default function App() {
return (
<div class
浏览 2提问于2020-05-03得票数 1
使用新的react hooks。如何更新状态，然后提交表单。 例如:我有一个搜索框，它使用setSearch的正常状态，在提交时，它会获取服务器上的数据。我还有一个搜索的history，如果用户点击它，它应该填充搜索，然后提交表单。 const Search = () => {
const [search, setSearch] = useState('')
const onSubmit = () =>{
fetch('http://server.com/?search='+search)...
}
cons
浏览 43提问于2020-04-09得票数 1
回答已采纳
1回答
我正在开发一款类似google文档最小版本的react应用程序。我使用的是一个包含两个字段title和content的redux表单，并且在对输入的更改中自动提交数据。
如何实现在输入时显示Saving和提交时显示Saved的特性？
// file: AutoSaveForm.js
import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import _debounce from 'lodash.debounce'
浏览 0提问于2019-08-27得票数 0
回答已采纳
1回答
我刚刚开始学习react，我需要一些帮助，创建一个登录页面，不能正确地设置状态。
如何在输入道具中设置onSubmit和onChange
import React, { Component } from 'react';
class LoginInfo extends Component {
state = {
info: {
userName: '',
password: ''
}
};
updateInfo = e => {
this.setState({ info: {
浏览 0提问于2019-05-19得票数 1
回答已采纳
2回答
我试图在react中找到一个表单验证的好例子。通过将事件从父窗体发送到其输入子表，并对每个子窗体调用验证方法，我找到了验证。
我还找到了一种方法，通过循环遍历表单子节点，并在字段验证后调用子字段上的setState。
据我所知，这些都是反模式，其反应方式是通过支持回调- 调用它。
假设我有一个组件：
class Main extends React.Component {
...
onSubmitHandler() {
...
}
render() {
return (
<FormComponent onSubmit={this.onSubmitHandler.b
浏览 1提问于2015-07-29得票数 4
回答已采纳
我使用了一个formik格式，并有如下的前参
Form.js
import React from "react";
import FormikWithRef from "./FormikWithRef";
const Form = ({
formRef,
children,
initialValues,
validationSchema,
onSubmit
}) => {
return (
<FormikWithRef
validateOnChange={true}
validateOnBlu
浏览 6提问于2020-08-06得票数 5
回答已采纳
我不知道如何解决这个问题: react "useQuery“是在函数"onSubmit”中调用的，它既不是react函数组件，也不是自定义React函数。React组件名称必须以大写字母开头。
export const LoginForm = () => {
const { handleSubmit, control } = useForm<IFormInput>({defaultValues: defaultValues, resolver: yupResolver(schema)});
const onSubmit = ({emai
浏览 13提问于2021-08-11得票数 2
我对下面的代码有一个问题： type Formdata{
title: string
cant: number
description
}
// I replace this code to the another code any[], but not
// resolving the problem
// const [sendData, SetsendData] = React.useState<Formdata[]>([])
const [sendData, SetsendData] = React.useState<any[]>([
浏览 9提问于2020-07-05得票数 0
回答已采纳
因此，我已经建立了一个向导表单使用的反应-最终形式，我正在使用我的注册页面。我试图弄清楚如何在最后一个页面上显示所有用户输入，作为用户在提交之前对其输入进行双重检查/验证的一种方式。任何帮助都将不胜感激！
(P.S. --我试着在发帖之前对此进行研究，但我所能找到的只是在Redux中存储用户输入，并从那里访问它们，如果可能的话，我想避免这种情况。)
这里有一个例子链接，它显示了我想要做的事情--如果你想找出一个解决方案，请随意使用它！！
下面是代码，缩短为只包含相关的比特：
我的Wizard.js页面：
import React, { Component } from "react&#
浏览 0提问于2018-11-18得票数 3
回答已采纳
2回答
import React, { Component } from "react";
class Learning extends Component {fName = React.createRef();onForm = e => {
e.preventDefault();console.log(this.fName.value.value);};render() {return (<div><form onSubmit={this.onForm}><inputtype="text" placeholder="Ente
浏览 0提问于2018-11-19得票数 2
回答已采纳
是否可以仅使用Jest来测试有状态的react组件？我找不到任何例子可以在不使用任何其他库的情况下实现这一点，如酶或反应测试库。 我想要测试的示例代码， import React,{Component} from 'react';
class SampleComponent extends Component {
constructor(props) {
super(props)
this.state = {
username: '',
password: '',
loginMessa
浏览 13提问于2020-04-27得票数 0
回答已采纳
1回答
如何在基于功能组件的react中使用输入名称数组来获得值。
这是我的密码
<form method="post" onSubmit={handleSubmit}>
<input type="text" name="otp[]" placeholder="0" className="form-control inputs"/>
<input type="text" name="otp[]" placeholder="0"
浏览 1提问于2022-04-01得票数 0
回答已采纳
我有一个具有名称和描述字段的React表单应用程序。
表单数据使用Hooks保存在本地状态对象中：
const [data,setData] = useState({name: '', description: ''})。
<Form />元素使用<Field initialValue ={data.name} />创建输入并传递它们的值。
在<Field />元素中，此initialValue传递给状态，状态控制输入值(更新的onChange)：
const [value,setValue] = useState(initi
浏览 1提问于2019-10-27得票数 0
回答已采纳
3回答
我有一个输入字段，它接受一个数字。(介于1和30之间)我想根据文本字段中的数字显示一个项目数组。如何使用React钩子来实现这一点。对于这样的开始，我有一些基本的东西，但这可能不是最好的开始。
export default function App() {
const [state, setState] = React.useState({ value: "" });
const [myArray, updateMyArray] = React.useState([]);
const onSubmit = () => {
updateMyArray(
浏览 0提问于2021-03-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
