如何先setState再运行onSubmit函数

在React中，setState是用于更新组件状态的方法，而onSubmit是一个事件处理函数，用于处理表单提交事件。如果需要在提交表单之前先更新组件状态，可以按照以下步骤进行操作：

在组件的构造函数中初始化状态：

constructor(props) {
  super(props);
  this.state = {
    formData: {
      // 初始化表单数据
    }
  };
}

创建一个用于更新状态的方法，例如updateFormData：

updateFormData = (event) => {
  const { name, value } = event.target;
  this.setState(prevState => ({
    formData: {
      ...prevState.formData,
      [name]: value
    }
  }));
}

在表单元素中使用该方法来更新状态：

<input type="text" name="username" value={this.state.formData.username} onChange={this.updateFormData} />

创建一个用于处理表单提交的方法，例如handleSubmit：

handleSubmit = (event) => {
  event.preventDefault();
  // 在这里可以使用更新后的状态进行其他操作
}

在表单元素的onSubmit事件中调用handleSubmit方法：

<form onSubmit={this.handleSubmit}>
  {/* 表单元素 */}
  <button type="submit">提交</button>
</form>

这样，当用户在表单中输入内容时，会先更新组件状态，然后再执行handleSubmit方法来处理表单提交事件。

相关·内容

如何先执行input (checkbox,radio)再执行函数

遇到一个问题，当input type="checkbox"点击时，没有立即执行勾选或去勾，而是先执行函数，如下代码 $(".sidebar_cart .cart_list ul").on("click"...check_box label",function (e) { console.log($(this).prev()[0].checked); price_link(); }); 解决办法是：先阻止默认事件...绑定再label上后，当点击时会执行这个label绑定的函数，再执行label和input的联动！！！

9382 0

如何测试 React 异步组件？

前言本文承接上文如何测试驱动开发 React 组件？，这次我将继续使用 @testing-library/react 来测试我们的 React 应用，并简要简要说明如何测试异步组件。...一起来看看代码中该如何实现？假设你有一个用 React 编写的小型博客应用程序。有一个登录页面，还有有一个文章列表页面，内容就跟我的博客一样。...登录测试先来实现登录页，先脑补一个效果图吧我们先来写下测试用例界面包含账号和密码输入框接口请求包含 username 和 password 防止登录重复点击登录成功跳转页面登录失败显示错误信息...测试渲染代码未动，测试先行，先确保我们的组件可以渲染。...dom 中的元素，这里使用 getByPlaceholderText 以上测试用例只测试了登录函数，但是我们并未写登录成功或者失败的逻辑，接下来来我们通过 jest 的 mock 函数功能来模拟登录

3.3K5 0

React--12:高阶函数

}) } render(){ return( ...我先定义了一个变量 a，它的值是name。...高阶函数如果一个函数符合下面2个规范中的一个就可称为高阶函数 1.若A函数，接收的参数是一个函数，那么A就可以称为高阶函数。 2.若A函数，调用的返回值依然是一个函数，那么A就可以称为高阶函数。...keyType]:event.target.value}) } } render() { return ( <form action="" onSubmit...({[keyType]:event.target.value}) } render() { return ( <form action="" onSubmit

6673 0

React面试题精选

React能够相对精确地找出哪些位置发生了改变以及如何发生了什么变化，并且知道如何只通过必要的更新来最小化重渲染。...父组件专注于管理状态，可以直接访问子组件的内部状态，从而控制子组件的UI要如何显示。为了进一步说明，加入我们想要渲染Profile而不是Badge。...如果在组件挂载之前，数据请求就已经完成，并且调用了setState函数将数据传递到组件状态中，因为组件未被挂载所以会报错。...一个可以在setState调用完成component重新渲染后被调用的回调函数， setState是异步操作函数，这也是它为什么把一个回调函数作为第二个参数的原因。...它只是比较少见，你可以传递一个接受组件的state和props然后计算返回一个新state 的函数给setState ,就像上面这段代码。

2.8K4 2

React Hook完成登录表单

printValues = e => { e.preventDefault(); console.log(username, password); }; return ( <form onSubmit...接着看第二种方式，我们将多字段组成一个对象，通过一个useState来定义，修改这个对象变量的函数，我们做特殊处理，代码如下： import React, { useState } from "react..."; import ReactDOM from "react-dom"; function LoginForm() { const [form, setState] = useState({...({ ...form, [e.target.name]: e.target.value }); }; return ( <form onSubmit={...以上是用useState完成表单的使用方法，总的来说本质不变，React处理受控组件，先绑定，再注册事件，事件中修改绑定的变量，页面触发刷新。

1.8K1 1

受控组件表单&不受控组件

而在 React 中，可变状态一般保存在组件的 state(状态) 属性中，并且只能通过 setState()更新。...){ super(props) // 定义状态 this.state = {value:''} // 函数可以产生独立作用域...,在这里修改函数内部的指针指向当前组件(类) this.handleChange = this.handleChange.bind(this) this.handleSubmit...super(props) // 定义状态 this.state = {value:''} // 函数可以产生独立作用域...,在这里修改函数内部的指针指向当前组件(类) // this.handleChange = this.handleChange.bind(this) //

2.1K3 0

React--11: refs与事件处理非受控组件和受控组件

form 提交触发handleSubmit方法 form中有两个输入项，用到回调函数ref ，并添加name属性 handleSubmit方法阻止页面跳转，并弹出提交的用户名和密码 class Login...username.value},密码是：${password.value}`) } render(){ return( 这个函数传入的参数就是事件，通过target.value就能获得输入框的值...}) } render(){ return(

5391 0

React 实战

项目创建 Create React App npx create-react-app my-app cd my-app npm start / yarn start JSX 基于 JS 的扩展语法如何将...函数组件 import React from 'react'; function Welcome(props) { return Hello, {props.name} }...}) // Correct this.setState((state, props) => ({ counter:satae.counter + props.increment })) setState...this.state.value); event.preventDefault(); } render() { return ( <form onSubmit...this.input.current.value); event.preventDefault(); } render() { return ( <form onSubmit

1.2K0 0

测开技能--Web开发 React 学习（十）表单

(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState...提交的名字: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit.../App' ReactDOM.render( , document.getElementById('root') ); 我们去启动下，看下表单是如何展示的 ?...(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState...提交的文章: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit

3923 0

React

但我们希望只编写一次代码就可以实现组件自动更新，需要借助 state 来实现（State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件，state 变更会调用 render方法），首要要先函数组件转成类组件...(): this.setState({comment: 'Hello'}); State 的更新可能是异步的，可能会把多个 setState() 调用合并成一个调用 // Wrong // 多个setState...// 改成函数即可 this.setState((state, props) => ({ counter: state.counter + props.increment })); state的更新合并...提交的名字: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit...又因为 state 是私有的，且提升后属于父组件，不受子组件控制，此时子组件想要改变父组件的 state 只能依靠父组件将 setState 方法包装成函数通过 props 传递给子组件调用 class

2.2K2 0

一小时入门React

提交的名字: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit...+ this.input.current.value); event.preventDefault(); } render() { return ( <form onSubmit...基本用法和参数 setState有两个参数，第一个是要更新的内容，可以是对象或者函数，第二个参数是回调函数更新完成后的操作可以写在回调函数中。...1）第一参数为对象 this.setState({quantity: 2}) 2）第一参数为函数 this.setState((state, props) => { return {counter:...state.counter + props.step}; }); setState() 的第二个参数为可选的回调函数，它将在 setState 完成合并并重新渲染组件后执行。

9773 0

React——受控组件和非受控组件【八】

} render() { return ( <form onSubmit...({username:event.target.value}) } savePassword = (event) => { this.setState...} render() { return ( <form onSubmit...} } ReactDOM.render(, document.getElementById('login')) 函数柯里化...} render() { return ( <form onSubmit

931 0

react面试题

父组件可以向子组件传递props，props中带有初始化子组件的数据，还有回调函数子组件的state发生变化时，在子组件的事件处理函数中，手动触发父函数传递进来的回调函数，同时时将子组件的数据传递回去...在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。...在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。扩展1: setState的第一个参数除了对象,还能传什么？...---函数,参数为当前state setState(state => { return { num: state.num + 1 } }) 扩展2: setState的第二个参数有什么用...$nextTick(),该函数会在setState函数调用完成并且组件重渲染后被调用扩展3: setState的时候如果两次state值没有发生变化,一定不会造成调用render吗?

7042 0

React---高阶函数和函数柯里化的理解

一、高阶函数　　如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。...saveFormData = (dataType)=>{ 12 return (event)=>{ 13 this.setState...) 22 } 23 render(){ 24 return( 25 <form onSubmit...//保存表单数据到状态中 11 saveFormData = (dataType,event)=>{ 12 this.setState...) 20 } 21 render(){ 22 return( 23 <form onSubmit

1.2K2 0

01-React基础(JSX, State, Refs, Props组件交互, Event, 生命周期)

, 需要调用setState, 传入对象修改值, 修改不是替换对象,而是对比赋值 this.setState({isHot:!...Demo extends React.Component { render() { return ( # 表单提交 <form onSubmit...提交的名字: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit...this.setState({[input]: event.target.value}) } } render() { return ( # 因为事件必须赋值一个函数, 但是直接加(),会被渲染的时候直接就执行掉,返回的是值/undefined, 所以需要在执行函数中, 返回一个函数, 来给React调用

1.1K3 0

React---组件实例三大核心属性（三）refs与事件处理

获取值：console.log(this.myRef.current.value) 二、事件处理通过onXxx属性指定事件处理函数...在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式...} 23 24 render(){ 25 return( 26 <form onSubmit...即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值） 1 2...) 8 } 9 render(){ 10 return( 11 <form onSubmit

1.2K2 0

学习 React Hooks 可能会遇到的五个灵魂问题

但是，通过 setState 回调函数，我们不用再依赖外部的 values 变量，因此也无需在依赖数组中指定它。...这个担忧是正确的，但是使用 useMemo 之前，我们应该先思考两个问题：传递给 useMemo 的函数开销大不大？在上面的例子中，就是考虑 getResolvedValue 函数的开销大不大。...doSomething(); }, []); return ; }; 我之前看过一篇文章（链接在文章的最后），这篇文章中提到...因此，在使用 useMemo 之前，我们不妨先问自己几个问题：要记住的函数开销很大吗？返回的值是原始值吗？记忆的值会被其他 Hook 或者子组件用到吗？...如何解决这些问题呢？一、通过 setState 回调，让函数不依赖外部变量。

2.4K5 1

92.精读《React PowerPlug 源码》

set 回调函数触发后调用 setState 更新 value。 reset 就是调用 set 并传入 this.props.initial 即可。 2.2....用法值得注意的是，setState 支持函数和值作为参数，是 Value 组件本身支持的，State 组件额外适配了 setState 的另一个特性：合并对象。...=> setState({ loading: true }); const onFinish = data => setState({ data, loading: false });...setState 实现了合并对象的功能，也就是传入一个对象，并不会覆盖原始值，而是与原始值做 Merge: export default { setState: (updater, cb) =>...不论如何，这个库的思想在日常的业务开发中都应该大量实践。

1.2K3 0

React学习（3）——列表、键值与表单原

本文记录了在官网学习如何使用JSX+ES6开发React的过程。。...篇内容： JSX语法与React组件状态、事件与动态渲染列表、键值与表单扩展：webpack搭建React开发环境列表与组件的键值首先让我们看看在JavaScript中我们是如何处理一个列表的...而在React中，可变的状态通常保存在state属性值中，并且只能通过setState来改变。 ...在受控组件中，每一个状态值的改变都会有一个相关处理函数来处理，这样可以直接修改或验证用户的输入。... ); } } 在这里例子中，在构造函数就初始化了

1.3K3 0

react父子组件传值示例「建议收藏」

import React from 'react'; export default class Text extends React.Component{ // 构造函数 constructor...v.age} ) }) } handle(e){ } change(){ this.setState...this.tarnsform.bind(this)}>请点击 ) } tarnsform(){ this.props.onSubmit...} } //------------------------------------------------------------------ // { /*<Test onSubmit

2852 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云