如何在react js redux中单击提交后清除输入字段
在React.js Redux中，可以通过以下步骤实现单击提交后清除输入字段：
- 首先，创建一个React组件，包含一个表单和一个提交按钮。在表单中，使用Redux的connect函数将输入字段与Redux store中的状态进行绑定。
- 在Redux store中，创建一个reducer来处理表单的状态。该reducer应该包含一个初始状态，其中包括表单的各个输入字段的值。
- 在Redux store中，创建一个action来处理提交按钮的点击事件。该action应该触发一个清除表单字段值的操作。
- 在Redux store中，创建一个新的reducer来处理清除表单字段值的操作。该reducer应该返回一个新的状态对象，其中包含清除了表单字段值的初始状态。
- 在React组件中，使用Redux的connect函数将提交按钮与Redux store中的action进行绑定。
- 在React组件中，使用Redux的connect函数将输入字段与Redux store中的状态进行绑定，并在表单中设置相应的value属性。
- 在React组件中，使用Redux的connect函数将清除表单字段值的操作与Redux store中的reducer进行绑定。
- 在提交按钮的点击事件处理函数中，调用Redux store中的action来触发清除表单字段值的操作。
通过以上步骤，当用户在输入字段中输入内容后，单击提交按钮时，Redux store中的状态会更新为包含输入字段的值。然后，通过调用清除表单字段值的操作，Redux store中的状态会被重置为初始状态，从而清除输入字段的值。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云视频处理（VOD）：https://cloud.tencent.com/product/vod
- 腾讯云音视频通信（TRTC）：https://cloud.tencent.com/product/trtc
- 腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。
相关·内容
2回答
如何使用react-redux、single action type single reducer调试action.type问题，但无法识别该类型
reactjs、redux、react-redux
我正在设置一个非常简单的react-redux应用程序，目前我只有一个action类型和一个reducer，所以使用switch或combine reducers不是问题，因为只有一个选项。在我的reducer中，我有一个布尔语句： 然后返回if(action.type === ADD_ITEM) (reducer代码) 然后在我的存储中调用这个reducer函数。当我测试我的应用程序时，状态没有更新，通过添加一些console.logs来查看问题所在，我意识到reducer代码没有被调用，因为action.type === ADD_ITEM返回为false。 我尝试在控制台上记录actio
浏览 40提问于2019-04-10得票数 0
3回答
Redux和React本机组件连接: this.props未定义
react-native、redux、react-redux、undefined
我正在尝试访问在我的reducer的初始状态中定义的name字段。目前，this.props正在返回未定义的。 我的reducer： import { combineReducers } from 'redux';
const INITIAL_STATE = {
name: "Test"
}
const userReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
default:
return state
}
}
浏览 24提问于2019-12-21得票数 1
回答已采纳
2回答
使用Redux的简单提交表单
reactjs、redux、react-redux
我正在尝试创建一个简单的表单应用程序，其中将有一个文本区输入和提交按钮。其中，如果我在文本区域中键入内容，然后单击submit，我刚刚键入的文本将显示在标记内的按钮下。当我在没有Redux的情况下这样做时，它工作得很好，即使在我使用Redux之后，这意味着当我只使用Redux管理一个状态(输入域状态)时，它工作得很好。但是当我做了两个减速器，两个调度，那么问题就发生了。这是我的代码。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Provider from
浏览 3提问于2021-05-10得票数 0
1回答
保存错误后重置-不还原为更正initialValues
redux-form
我有个很奇怪的虫子。我在这里再现了最简单的测试用例场景：
我还上传了一个屏幕说明，这个视频在youtube上- 。
我的目标是有一个单字段的表单，一个按钮“重置”和一个按钮“保存”。单击"Save“将表单值保存到我的store中的一个名为save的还原器中。单击“重置”应将表单值重置为最后一个“原始”值(initialValues中的值)。
不过，我的问题是，保存表单后，“重置”按钮应该将其重置为“原始”值(新保存的值，initialValues中的值)，但它正在将其重新设置为“旧的原始值”。
以下是我的完整应用程序代码：
import React from 'react
浏览 3提问于2017-08-04得票数 0
回答已采纳
3回答
如何使用redux来响应本机
react-native、react-redux
我正在尝试制作一个简单的应用程序，其中我有一个inputText，并有一个按钮，当按下inputText值时会发出警告。
但是我需要在这个过程中添加redux，在这个过程中，inputText的值将首先被存储，存储的值将被警告。
但当我试着的时候，它对我不管用..。我不知道我做错了什么。如果有人能帮我，那就太好了。
这是我的密码：
Store.js
import { createStore , applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-exten
浏览 0提问于2018-09-14得票数 0
回答已采纳
1回答
如何将react与redux连接起来？
react-native、react-redux、store
因此，我正在尝试学习使用react-native的react-redux，并且我想创建一个页面，在那里我可以输入一个数字并按下登录。当我按下login时，页面会提醒我输入的数字并保存到我用redux创建的商店中。
有人能告诉我我做错了什么吗?我应该添加什么或做些什么才能让它正常工作？
下面是我的测试页面
import React, {Component} from 'react';
import {View, TextInput, TouchableOpacity, Text} from 'react-native';
import {connect} from
浏览 1提问于2018-09-12得票数 0
1回答
我正在尝试使用Redux调度来处理API错误，在最后创建action，reducer & connect(mapStateToProps)。
所以当我输入错误的url时，我会在我的视图上得到错误信息。但我的按钮链接包装在标签中，然后我的下一个视图显示相同的错误消息，而不是呈现新视图。
// Actions
export const API_ERROR = "API_ERROR"
export const resetErrorCode = () => ({
type: RESET_ERROR_CODE
})
// Reducers
import { API_E
浏览 0提问于2019-02-11得票数 0
2回答
高效地呈现大量的Redux表单字段？
javascript、reactjs、redux、react-redux、redux-form
我每天都有一张员工的桌子和他们每月的工作时间。在这里，我们可以批量更新所有员工的工时值。
当前月份的简单计算: 30天x50名员工将导致1500挂载的Redux表单字段。
每次挂载字段时，Redux表单都会分派一个操作，以便在Redux存储中注册该字段。因此，派遣了1500个事件。
通过使用Chrome->性能工具进行调试，我发现从安装到分派到呈现字段的整个过程大约需要大约4秒：
上面的性能评分基于以下简单的工作示例，我使用React、Redux、Redux表单、Reselect创建了以下示例：
/* ----------------- SAMPLE DATA GENERA
浏览 0提问于2018-11-07得票数 5
1回答
React Redux (在单个文件中)在存储更改后不调用render()
javascript、reactjs、asynchronous、redux
我正在尝试创建一个React Redux文件的简单示例，以演示从API检索数据后的更改。reducer确实创建了一个要返回的新状态，但是render()并没有被调用。render()是否仅在Provider标记内的子组件中调用；即。它不会调用在其中定义提供程序的组件的render()。 如果有任何帮助，我将不胜感激，因为我已经阅读了几个小时的文档。:-( import React from 'react';
import axios from 'axios';
import { createStore } from 'redux';
impor
浏览 27提问于2020-01-03得票数 1
回答已采纳
1回答
为什么我的回调要用redux多次调用？
javascript、reactjs、redux、react-lifecycle
我正在用react编写一个redux应用程序，避免使用react-redux，这在技术上是可行的，如果我们手动处理所有分派的事件。这是示例代码。
The index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/aja
浏览 8提问于2020-10-14得票数 1
回答已采纳
1回答
将参数传递给更新存储在react-redux中的方法
reactjs、redux、react-redux、redux-thunk
我希望用户能够输入文本到输入框，并在此基础上想要搜索的api。我使用的是redux和redux-thunk。我不确定应该如何将作为参数输入的文本传递给API调用。
如果我没有使用redux和thunk，我会将组件的状态设置为
this.state = {
movie: ''
}
然后在input type=text上，我会用e.target.value更新movie值onChange。在redux中使用react时应该采取什么方法？
我的代码如下所示。
import React, {Component} from 'react';
import {ren
浏览 8提问于2017-01-17得票数 0
2回答
将数据写入redux中的最简单的方法是什么？
javascript、reactjs、ecmascript-6、redux
在我的应用程序中，我使用了React和Redux (以及用于异步任务的Redux-thunk )。因此，当我需要将一些数据写入store作为component交互的结果时，我会同时使用action和reducer。但它总是必要的吗？尤其是在对修改后的字段没有connect的情况下，component？我总是需要action和reducer将一些数据写入store吗？或者，也许有一种类似于setState in store的方法
浏览 7提问于2016-11-15得票数 0
回答已采纳
1回答
无法从onClick中的方法访问道具
reactjs、react-redux、react-proptypes
我有我的index.js的以下内容。我已经设置了用创建-反应-应用程序反应反应。然后我安装了redux并对redux进行了反应。
import React from 'react';
import ReactDOM from 'react-dom';
import AppContainer from './AppContainer';
import {createStore} from 'redux'
import {Provider} from 'react-redux'
const defaultState
浏览 0提问于2018-03-08得票数 2
回答已采纳
2回答
如何允许连接根据状态更改重新呈现对象
reactjs、redux
在下面的示例中，我希望组件在列表更新时重新呈现。但是，即使connect被传递了新的状态，它也不会重新呈现组件。
我知道connect执行浅层比较，但不知道如何让它比较object的值。我找不到任何启用了这些选项的连接示例。
我已经看到了和更多，但它也没有帮助。
我试过了
const ConnectList = connect(mapStateToProps,null,null,{areStatesEqual : () => false})(List)
试着让它重新呈现任何变化。这似乎不太管用。
import React, { Component } from 'react
浏览 0提问于2018-07-08得票数 1
2回答
React & Redux:如何在点击按钮时更新受控输入值？
reactjs、redux、react-redux、redux-form
因此，在我的表单中有一个受控制的输入字段。但是我也想通过点击按钮来更新它的值。当按钮被点击时，状态被更新，值已经改变。但是由于某些原因，input的内部HTML仍然是一样的。 会出什么问题呢？也许是因为我的表单状态存储在Redux中？顺便说一句，我没有使用Redux Form或其他任何东西，我只是将我的表单状态存储在Redux中，仅此而已。这样可以吗？ 代码是这样的。我使用了react-text-mask。“‘address”是从Redux状态导入的： import MaskedInput from 'react-text-mask'
<MaskedInput
浏览 29提问于2020-08-23得票数 1
1回答
react-native使用redux设置全局状态和回调
javascript、reactjs、redux
我正在尝试使用redux全局传递状态。我想要做的是，在第一个屏幕中，我生成一个randomNumber并将其设置为global state。
然后，我导航到下一个屏幕，当我切换一个按钮时，我会回调global state randomNumber。下面是我的代码：
App.js
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { createDrawerNavigator, createStackNavigator, } f
浏览 1提问于2018-10-15得票数 0
2回答
如何在另一个组件中使用一个组件的状态？独立成分(反应)
reactjs、redux
我在下拉组件中使用复选框菜单，当用户检查下拉复选框中的任何选项时，状态将被更新，这很好，现在我想将状态使用到我的另一个组件中，我知道redux用于兄弟姐妹之间的通信，但我面临的问题是我的下拉代码。
import { connect } from "react-redux";
const options1 = [
{label: 'One', value: 1},
{label: 'Two', value: 2},
{label: 'Three', value: 3},
];
class _Dropdown extend
浏览 4提问于2020-09-07得票数 0
回答已采纳
3回答
操作不会在reactjs中的按钮单击时调用
reactjs、react-redux
我是个新手。我创建了一个演示application.And，我试图在单击按钮时隐藏消息。1)但该操作不会在单击按钮时调用。2)当控制台页面重载时，reducer.This内部的action显示如下。
inside reducer
redux.js:30 Object {type: "@@redux/INIT"}
redux.js:31 Object {}
redux.js:29 inside reducer
redux.js:30 Object {type: "@@redux/PROBE_UNKNOWN_ACTION_j.r.h.g.s.q.b.y.b.9"}
浏览 13提问于2017-06-20得票数 0
回答已采纳
1回答
如何与redux一起使用输入？
reactjs、redux
我需要你的帮助。我试着用redux做一个todo应用程序。现在，我尝试通过redux从输入中呈现数据。单击按钮时无法创建和绘制项目。您能帮我完成这个任务吗?因为我不知道如何使用redux输入？无论如何，这里有一个指向项目的链接谢谢
import React, {useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {ADD_TODO} from "../Redux/Action_Types";
export let Tasks =
浏览 7提问于2021-12-11得票数 0
回答已采纳
2回答
在容器组件模式中集成调度操作
reactjs、redux、react-redux
因此，我完全不明白如何集成容器和组件模式。我已经复习了整个上午的例子，似乎什么都没有点击。在我的第一个项目之前，我是如何使用React的？？在我的视图组件中获取数据，然后使用工作的@connect将数据作为道具传递给我，但在此时以“自动”的方式传递给我。
import React;
...
import {action} from 'path/to/action.js';
@connect((store) => {return{ key: store.property}});
export class Component{
componentWillMount()
浏览 3提问于2017-08-31得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
