如何在React表单中使用构造函数中的上下文？
在React表单中使用构造函数中的上下文，可以通过以下步骤实现：
- 首先，在构造函数中定义一个上下文对象，可以使用React的
createContext方法创建一个上下文对象。例如：
const MyContext = React.createContext();- 在构造函数中，将需要共享的数据或方法添加到上下文对象的
Provider组件中。例如：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
formData: {
// 表单数据
},
updateFormData: this.updateFormData, // 表单数据更新方法
};
}
updateFormData = (data) => {
this.setState({ formData: data });
}
render() {
return (
<MyContext.Provider value={this.state}>
{/* 表单组件 */}
</MyContext.Provider>
);
}
}- 在需要访问上下文数据或方法的组件中，使用上下文对象的
Consumer组件来获取上下文数据或方法。例如，在表单组件中：
class MyForm extends React.Component {
render() {
return (
<MyContext.Consumer>
{(context) => (
<form>
{/* 使用上下文数据 */}
<input
type="text"
value={context.formData.name}
onChange={(e) => {
const data = { ...context.formData, name: e.target.value };
context.updateFormData(data);
}}
/>
{/* 其他表单元素 */}
</form>
)}
</MyContext.Consumer>
);
}
}通过上述步骤，我们可以在React表单中使用构造函数中的上下文。上下文对象可以在构造函数中定义需要共享的数据或方法，并通过Provider组件将其传递给子组件。子组件可以通过Consumer组件来获取上下文数据或方法，并在表单中使用。这样可以实现在React表单中共享和更新构造函数中的数据。
相关·内容
1回答
我正在努力把Stripe整合到我的反应构建中。我遵循了我所理解的表单提交/标记的最佳实践的语法，一旦浏览器到达self.stripeHandler()，我的控制台就会出错。
当不构建React，而是使用stripeResponseHandler函数时，Stripe.card.createToken函数中包含了一个参数，并在没有问题的情况下触发stripeResponseHandler函数。
现在，我在调整Stripe文档以作出反应方面遇到了困难。有什么想法吗？
我用webpack来组装这个建筑。这就是问题所在，是吗？
import React from 'react';
i
浏览 1提问于2016-08-02得票数 1
回答已采纳
2回答
当我开始在输入表单中键入好友名称时，我得到了一个"TypeError:无法读取未定义的属性‘状态“。错误指向Friends.js中的这一行：
让朋友搜索=this.state.friends.filter(朋友=> {
谁能快速看一看并告诉我错误在哪里？谢谢!
Friends.js
import React from 'react'
import DefaultLayout from "../layout/Default"
import './Friends.css'
import Axios from 'axios'
浏览 0提问于2020-05-13得票数 0
1回答
我试图在getWeather类的构造函数中调用FiveDayWeather ()。我将函数绑定到类的上下文中，但是当我试图在构造函数中调用函数时，它会出错。
我试过：
this.getWeather()
当这不起作用时
getWeather()
但这也没用
如何从该类中调用getWeather函数？
class FiveDayWeather extends React.Component {
constructor(props) {
super(props)
this.state = {
error: null,
isLoaded: false,
浏览 3提问于2018-05-22得票数 1
回答已采纳
我正在学习React.js，我看到super关键字在构造函数中使用了很多。
我知道super允许子类访问this关键字。然而，我找不到更多的解释。
为什么调用super()，神奇地使我的类访问this
为什么super关键字将this绑定到类的上下文？
当我不处理子类时，为什么不调用super()
浏览 5提问于2017-02-01得票数 13
我在这里提取了我的反应码。我没有将“此”绑定到方法A()。也就是说，在构造函数中，我没有做this.A = this.A.bind(this);，也没有使用任何箭头语法进行绑定。所以编译器不能知道A()中这个的值是什么。由于我在A()中使用了this.map，编译器应该会抛出错误，以便使用这个。在检查Chrome工具中的代码时，我发现编译器似乎正确地分配了这个的值，这是由var _this2 = this自动完成的。我无法理解这种行为。有人能解释一下吗。)我是第一个反应的人。如果这个问题听起来很傻，请容忍)
class Test extends React.Component{
con
浏览 5提问于2017-07-04得票数 2
我在有状态组件中呈现一个<select>：
class StatefulContainer extends React.Component {
constructor(props) {
super(props);
this.state = {mode: 'all'};
}
render() {
return <div>
<form>
<select value={this.state.mode} onChan
浏览 0提问于2015-12-13得票数 0
回答已采纳
这是子组件
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import leftNavigation from '../actions/leftNavigation';
class AddBorrowers extends Component {
constructor(props){
super(props);
浏览 0提问于2019-01-10得票数 0
回答已采纳
1回答
我有我的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
回答已采纳
正在按照本教程制作一个简单的todo应用程序()。
问题是我遇到了这个错误：
TypeError: _this is undefined
引用在以下组件中使用onClick删除时：
import React, {Component} from 'react'
class TodoItems extends Component {
createTasks(item) {
return (
<li key={item.key} onClick={() => this.props.deleteItem(item.key)
浏览 0提问于2018-12-05得票数 2
回答已采纳
我了解this绑定的一般理论(重要的函数调用站点、隐式绑定、显式绑定等)。以及解决这种绑定问题的方法，因此它总是指向我想要的this (构造函数、箭头函数等中的绑定)，但是我很难获得内部机制。
看看这两段代码：
class demo extends React.component {
goToStore(event) {
console.log(this)
}
render() {
<button onClick={(e) => this.goToStore(e)}>test</button>
}
}
与
class demo e
浏览 6提问于2017-12-06得票数 9
回答已采纳
4回答
我是ReactJS新手，但我想创建一个简单的域，可以登录和注销。我在AsyncStorage中存储用户凭据。这是我的index.js：
..
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
..
class Index extends Component {
render() {
return (
<Router>
<Switch>
&
浏览 0提问于2018-08-21得票数 0
回答已采纳
我对React很陌生，我正在学习React组件生命周期的最新版本。下面的部分代码的“超级”调用被标记为所示的废弃警告。我很难理解这篇文章，因为很多文档仍然使用“超级”，我不知道后续的是什么，即使从反馈中链接的整篇文章中也是如此。有什么想法吗？谢谢。
class App extends Component {
constructor(props) {
super(props);
}
}
以下是警告：
constructor React.Component<any, any, any>(props: any, context?: any): React:Componen
浏览 5提问于2020-09-12得票数 84
回答已采纳
1回答
如何在同一主页上呈现React引导登录表单而不是路由到新的新/login页面？
我的意思是，当我单击LogIn链接时，当前的页面活动(如单击、滚动)应该被禁用，只需显示登录表单。我怎样才能做到这一点？
我已经做了什么，
创建了react引导项目，并使用添加了简单的登录表单。
下面是App.js中的代码
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component
浏览 3提问于2020-09-11得票数 0
回答已采纳
我目前正致力于将React集成到基于TypeScript的框架中。不幸的是，一旦我想注入组件，类型就不正确了。
我知道这不是很多人使用React的方式，而是我们希望使用依赖注入，因为我们认为它是更好的模式，而不是使用更高级的组件。
我试图做以下几件事
import * as React from "react";
import * as ReactDOM from "react-dom";
export class Foo extends React.Component {
public render() {
return (<d
浏览 0提问于2018-10-25得票数 1
回答已采纳
大家好，我试图在用户注销时将用户重定向到主页，但是我遇到了一些问题。我在react路由器中使用重定向，我应该重定向到主页，因为redirect是真的，但是我得到了一个奇怪的错误，说this2.setState不是一个函数。
有人知道这是什么意思吗？谢谢你的帮助！
import React from "react";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
Button,
NavItem,
NavLink,
UncontrolledDropdown,
Dropd
浏览 12提问于2018-07-26得票数 1
回答已采纳
1回答
我正在使用Formik表单在React本地应用程序中。我希望使用Formik组件之外的按钮提交我的表单。我知道useFormikContext钩子是如何工作的，但问题在于我的组件是类组件(而不是函数组件)。我如何提交我的表格？
浏览 6提问于2021-11-12得票数 2
回答已采纳
我有一个React组件帖子：
import React, { Component } from 'react';
const list = [
{
title: 'React',
url: 'https://facebook.github.io/react',
author: 'Adam Beat',
num_comments: 4,
points: 3,
objectID: 10,
}, {
title: 'Rails',
url:
浏览 7提问于2017-03-14得票数 2
回答已采纳
我想把处理的代码放到一个类中，但是要初始化一个exoplayer，我需要编写如下代码
void prepareExoPlayer(Context context, PlayerView exoPlayerView) {
if (context == null || exoPlayerView == null) {
return;
}
if (player == null) {
TrackSelection.Factory videoTrackSelectionFactory = new Ad
浏览 23提问于2019-11-12得票数 1
回答已采纳
我有一个容器，我需要更改UI表单，显示表单或显示成功页面。
容器有一个state.showSuccess，我需要MyFormModule能够调用容器来更改状态。
下面的代码可以工作，但我收到以下警告：
JSX道具不应使用.bind()
在不使用.bind()的情况下，如何才能使它工作呢？
...
const myPage = class extends React.Component {
state = { showSuccess: false };
showSuccess() {
this.setState({
showSuccess: true,
浏览 4提问于2018-01-05得票数 5
回答已采纳
var B = React.createClass({
render: function() {
return (
<div>
<input type="button" onClick={this.props.saveFunction} />
</div>
);
}
});
var A = React.createClass({
render: function() {
return (
<
浏览 0提问于2015-12-03得票数 2
2回答
我正在使用React，我看到一个常见的做法是绑定构造函数中的函数，我也想使用它。不过，我不太清楚绑定对于接受参数的函数是如何工作的。例如，我有这样的东西：
class MyClass extends Component {
constructor(props) {
super(props);
this.onListClicked = this.onListClicked.bind(this);
}
onListClicked(id) {
// performs some action
}
render
浏览 6提问于2017-09-17得票数 1
回答已采纳
2回答
我试图捕获窗口高度并将其传递给react中的子组件。
我指的是手册中的这个指南：。
这就是我的代码看起来的样子，但是我得到了一个'setState is not a function‘错误。
import React from 'react';
import jsonp from 'jsonp';
import Gallery from './Gallery.jsx';
export const MF = 'http://auryn/modern-frontend/public_html';
export defaul
浏览 11提问于2016-09-24得票数 0
回答已采纳
1回答
带IIFE的逗号运算符
、、、
在react库中，在定义useSelector的文件中，我发现了与IIFE一起使用的逗号操作符的多个实例，其方式如下：
var _useReducer = (0, _react.useReducer)(function (s) {
return s + 1;
}, 0),
forceRender = _useReducer[1];
var subscription = (0, _react.useMemo)(function () {
return (0, _Subscription.createSubscription)(store,
浏览 3提问于2022-04-16得票数 1
回答已采纳
3回答
我是新的反应，并开始致力于改变组件的状态。请问如何使用适当的对象来操作这些值？
Header.js组件
//component with state and constructor
import React, { Component } from 'react';
export class Header extends Component{
constructor(props){
super(props);
this.state = {colors: this.props.color};
}
changeHeaderC
浏览 4提问于2020-11-12得票数 0
我创建了一个方法来处理来自表单的提交，以通过at存储数据。我想在成功存储data.But后显示snackbar这总是显示错误:无法读取属性‘setState’。但是在fetch行标记的错误消息(“”不在行this.setState.Please帮助我找到问题。我在这个问题上被卡住了2个小时。
handleSubmit(event) {
event.preventDefault();
fetch("http://localhost/lumen/udemy-react-api/public/api/departments", {
method: "
浏览 0提问于2019-07-20得票数 0
1回答
我正在尝试创建类的模拟实例，它是Verticle中的autowired，但我将其作为null。对于同步代码，其工作方式看起来对Vert.x没有用处。 垂直是： @Component
public class MyVerticle extends AbstractVerticle{
@Autowired
private ServiceExecutor serviceExecutor;
@Override
public void start() throws Exception {
super.start();
浏览 24提问于2019-12-10得票数 1
2回答
在我的应用程序中，构造函数中有一个带有状态变量和一个组件变量的组件。但是，如果我尝试通过调整窗口大小从我的方法中访问它们，我将得到undefined和cannot read property 'test' of undefined。
import React from 'react';
class Testapp extends React.Component {
constructor(props) {
super(props);
this.state = {test: "he"};
浏览 1提问于2020-01-20得票数 1
回答已采纳
5回答
我使用React已经有一段时间了，我已经习惯了这样的概念，即我必须手动将组件方法绑定到组件实例，因为React决定在非自动绑定中是“惯用”的：
因此，我们决定不让这个内置的React类模型。如果需要，仍然可以在构造函数中显式地预绑定方法。
类计数器扩展React.Component {构造函数(){ super()；this.tick = this.tick.bind(this)；}蜱(){.} }
我们可以在这个例子中清楚地看到这一点的影响，从类似的问题：
然而，最近有人问我，基于原型的类和新的、类之间是否有什么区别。直观地说，这个答案应该是一个强调的“不！”，因为生成的实
浏览 7提问于2016-10-29得票数 7
回答已采纳
1回答
我正在复习一些React的基础知识，并需要对react类组件中构造函数方法的使用做一些澄清。我通常的做法是声明基于类的组件并在不使用构造函数的情况下定义状态，如下所示：
import React, { Component } from 'react';
export class Testing extends Component {
state = {
example: "Hello World!!!"
}
render() {
return <div>
{this.state.example}
&
浏览 2提问于2022-01-22得票数 2
回答已采纳
3回答
我正在尝试嵌入一个脚本标记来在组件中呈现一个表单。我不知道如何在React中做到这一点。如果我使用这个标记并将其粘贴到HTML文档中，表单就会完美地加载，但是我不知道如何使用React来做同样的事情。
由于工作原因，我不能将实际代码粘贴到此站点上嵌入，但我主要是尝试将其嵌入到一个组件中，以便表单呈现和用户可以提交表单：
<script type="text/javascript" src="https://form.jotform.com/jsform/1234566789"></script>
有什么想法吗？
浏览 24提问于2020-05-19得票数 0
我想通过signalr从服务器获取数据，并更新React组件的内容。一切都很好。从服务器接收数据，但组件状态无法更新(未定义)。
这是我的代码：
import React, { Component } from 'react';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as signalR from '@aspnet/signalr';
class Notification extends React.Component {
浏览 0提问于2019-08-04得票数 6
回答已采纳
我有一个简单的应用程序，它获取一些天气JSON并显示它。用户可以输入一个位置，也可以按下一个"Get幸运“按钮，该按钮可以获取一个随机城市。初始状态在App.js中设置
this.state = {
error: '',
status: '',
queryString: 'london,gb',
queryID: '',
queryType: 'q',
cityData: cityData,
weatherData
浏览 0提问于2019-04-03得票数 1
回答已采纳
这是一个未完成的类版本，但是Typehead类的完成版本应该打印出与输入匹配的道具中的选项列表-基本上是一个自动完成函数。我遇到的问题是，当我调用handleChange方法时，出现错误"cannot read property 'setState‘of undefined“。代码如下：
import React from 'react'
export default class Typehead extends React.Component {
constructor() {
super()
this.state = {}
}
浏览 17提问于2017-07-29得票数 1
回答已采纳
3回答
UI状态不更新
、、、
我是新的反应，并试图建立一个简单的AppBar抽屉使用材料用户界面。
应用程序和抽屉的实现似乎是正确的，但由于某种原因，当单击切换按钮时，没有更新抽屉状态。
我跟踪了资料用户界面中的引用，并做出了反应，所以我不确定发生了什么。下面是组件的代码：
import React, { Component } from 'react'
import { Link } from 'react-router'
import AppBar from 'material-ui/AppBar';
import Drawer from 'mat
浏览 1提问于2016-06-28得票数 1
回答已采纳
我在我的dapp中使用了新的上下文API支持的‘微雨-反应’库。谁能说明如何接收从DrizzleContext.Provider发送到“类”组件的上下文？查看下面的示例index.js文件。假设< App />组件是“类”组件，而不是“函数组件”。对于“函数”组件，我想它非常简单--使用< DrizzleContext.Consumer >。但是，如何在类组件中获取上下文(微流={微口})？我尝试给一个构造函数提供上下文支持，如下所示：
constructor(props,context) {...}
但这不管用。有什么想法吗？
我的index.js看起来是这样的：
&
浏览 0提问于2019-01-14得票数 0
回答已采纳
2回答
最近，我开始学习ReactJS，因此- ES6。我对ES5相当熟悉，但有些事情对我来说并不那么清楚。
示例1:方法语法
以下两种方法有什么区别？
export class InvoiceForm extends React.Component {
methodName1() {
}
methodName2 = () => {
};
}
示例2：之外的类属性
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.pro
浏览 3提问于2017-12-03得票数 6
回答已采纳
我使用onPress“处理程序”呈现了以下类型的列表。
我已经意识到onPress处理程序是无用的，因为我无法将种族的引用按下。我得到的是没有定义的错误。
var races = Engine.possibleRaces;
function racePressed(ref) {
console.log("REF: " + ref); // is never called
}
var races = Engine.possibleRaces;
var rowViews = [];
for (var i = 0; i < races.length; i+
浏览 0提问于2016-02-26得票数 7
回答已采纳
我正在使用一个简单的登录表单，我有LoginContainer (容器组件)和Login (演示组件)，我正在尝试提交表单并访问容器组件中的数据。
下面是我拥有的代码
Login.js：
export default class Login extends React.Component {
constructor() {
super();
}
render() {
return (
<div className="login jumbotron center-block">
浏览 1提问于2016-04-12得票数 1
您能解释为什么react状态在函数handleFinishChange中是可见的，而在validationFinishTime中却是不可见的。两者都转移到组件InputFieldForm。当字段在Uncaught TypeError: Cannot read property 'finish' of undefined中更改时，此代码的执行将导致validationFinishTime中的input。
组件ShiftFormAdmin
import React from 'react'
import {browserHistory} from 'reac
浏览 5提问于2016-12-04得票数 1
回答已采纳
有人能用外行人的话向我解释FormControl的功能是什么，为什么/如何使用它？
我在React中使用了Material，我看到的许多表单示例都使用了FormControl，但是我很难理解它所做的事情，以及它对我的项目是否必要。
现在，我只需要一个名为Form.js的组件，并且在div中包含所有的表单元素，如下所示：
return (
<div>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="select-multiple-accounts">
浏览 2提问于2019-10-01得票数 40
我编写了一个移动应用程序，通过使用react本机从用户那里收集一些数据。它使用react native 0.57.4，react 16.2.0，react-redux 5.0.5，prop-types 15.5.10,，react-navigation 1.0.0-beta.11。我还使用在web视图中创建调查问题，也就是说，基本上嵌套一个包含SurveyJS调查的webview在一个React中。
Package.JSON
{
"name": "SurveyJSInWebViewWithReactAndReactNative",
"versio
浏览 0提问于2018-11-12得票数 0
3回答
我的问题似乎很简单，但我想不出为什么它不起作用。
我所要做的是基本的事情--我把一个函数从一个父函数传递到一个子函数，它应该将父函数的"test“值的值增加1 (这只是一个概念的证明)。当调用父函数时，问题就会发生。在调试器中，this.props也是未定义的，所以不奇怪this.props.test会是什么。我遗漏了什么？
父级：
export default class GameList extends Component {
constructor({ navigation }) {
super();
this.state = {
test: 0,
浏览 3提问于2017-04-30得票数 1
回答已采纳
4回答
这是我的代码，我的反应工程与消防基地，我是从上午在这个问题中，请帮助我plzzz
constructor (){
super()
this.state = {Message : false}
this.Navigate = this.Navigate.bind(this)
CompLoad = true
var i = firebase.auth().currentUser.uid
firebase.database().ref('users/' + i + '/in
浏览 1提问于2018-10-01得票数 0
回答已采纳
4回答
如何反应，您可以像下面这样定义状态：
class Test extends React.Component {
state = { foo: 'bar' }
}
但是，为了定义其他实例属性，需要在构造函数或其他函数中这样做吗？因为，你不能这样做：
class Test extends React.Component {
myField = 0;
render() {
myField++
}
}
浏览 0提问于2018-06-14得票数 1
回答已采纳
我试图建立一个简单的计算器在反应使用组件。我想获取按钮的值并将其赋值为"currentItem"，但是，我仍然得到错误“无法读取属性'setState‘of null”。这是密码。代码位于两个单独的jsx文件中。我真的很感谢你的帮助。
import React from 'react';
import NumbersComponent from './NumbersComponent.jsx';
import EquationComponent from './EquationComponent.jsx';
import
浏览 2提问于2016-10-10得票数 0
回答已采纳
我在我的Xamarin表单应用程序中加载数据时遇到了问题。我在MainPage()函数中调用异步函数，并希望在执行后绑定数据。 public MainPage()
{
InitializeComponent();
LoadThingSpeak().ContinueWith(async (t) => await GetLocation(t.Result).ContinueWith(async (r) => await LoadForecast())).GetAwaiter();
BindingContext = bindingData;
} 但是Bindin
浏览 23提问于2020-04-02得票数 1
回答已采纳
嘿，伙计们，我在编辑我填写的编辑代理表单时遇到了问题。我正在使用getDerivedStateFromProps()生命周期方法，但每次在完全填充之后尝试编辑时，我都会收到这样的错误: Uncaught : Cannot read property 'setState‘of undefined。我已经分别阅读了react文档，但我到目前为止使用的所有方法都没有解决方案。我该如何解决这个问题呢？
import React, { Component } from 'react'
import { connect } from 'react-redux';
i
浏览 0提问于2019-03-24得票数 0
它是关于formik (react & typescript)的。
我设法让一些代码工作，但我使用的是.bind(this)。我真的认为有更好的方法来做事情，所以我在这里问。
代码如下：
public register(values: IRegistrationForm, { setSubmitting, setFieldError }: FormikActions<IRegistrationForm>) {
axios
.post(process.env.REACT_APP_API_URL + '/register', values
浏览 1提问于2018-12-02得票数 0
结构如下：
ApiService.js
App.jsx
components/
Tracks.jsx
...
这是我的ApiService.js
// ApiService.js
import Axios from 'axios';
class ApiService {
constructor() {
this.axios = Axios.create();
this.axios.interceptors.response.use(null, this.authInterceptor);
this.g
浏览 1提问于2020-04-25得票数 0
回答已采纳
App.js -父组件
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';
import Context from './Context';
class App ext
浏览 0提问于2019-07-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
