为什么我的React onChange方法与酶containsAllMatchingElements测试中的箭头函数不匹配
React是一个流行的JavaScript库，用于构建用户界面。它提供了一种声明式的编程模型，使开发人员能够轻松地构建可交互的UI组件。在React中，onChange方法是用于处理表单元素值变化的事件。
在React中，onChange方法通常与input、select或textarea等表单元素一起使用。当用户与这些表单元素交互并更改其值时，onChange方法会被触发，并且可以执行相应的逻辑来处理这些变化。
酶（Enzyme）是一个用于React组件测试的JavaScript库。它提供了一组实用工具，用于模拟React组件的渲染和交互，并提供了一些断言方法，用于验证组件的行为和输出。
在酶的containsAllMatchingElements测试中，箭头函数是一种常见的用于定义匿名函数的语法。箭头函数通常用于提供回调函数，以便在特定事件发生时执行相应的操作。
然而，根据提供的问答内容，我们无法确定具体的代码和测试场景。因此，以下是一些可能导致React的onChange方法与酶的containsAllMatchingElements测试中的箭头函数不匹配的原因：
- 语法错误：箭头函数的语法可能存在错误，导致无法正确匹配。请确保箭头函数的语法正确，并且与onChange方法的参数和返回值类型相匹配。
- 上下文绑定：箭头函数的上下文绑定可能导致与onChange方法的调用方式不匹配。请确保箭头函数在测试中正确地绑定了上下文，并且可以访问到onChange方法。
- 异步操作：如果onChange方法涉及到异步操作，例如使用了Promise或异步请求，那么在测试中需要适当地处理异步操作的完成。可以使用酶提供的异步测试工具，例如async/await或酶的异步测试方法，来确保测试在异步操作完成后进行断言。
总结起来，要解决React的onChange方法与酶containsAllMatchingElements测试中的箭头函数不匹配的问题，需要仔细检查代码，确保箭头函数的语法正确、上下文绑定正确，并适当处理可能的异步操作。此外，还可以参考酶的文档和示例，以了解更多关于酶测试的最佳实践和常见问题的解决方案。
对于React开发和测试，腾讯云提供了一系列相关产品和服务，例如腾讯云函数（SCF）、腾讯云开发工具包（Tencent Cloud SDK）等。这些产品和服务可以帮助开发人员更好地构建、测试和部署React应用程序。你可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多信息。
相关·内容
2回答
如何使用react.js处理单选按钮
javascript、html、reactjs
我正在构建一个React组件。这是一个带有单选按钮的表单，它只能设置为True，然后不再设置回false。我希望能够打开和关闭它。因为沃思读出来了。
相应的代码可能是什么样子的？目前我有这样的想法：
import React, { Component } from 'react';
class Form extends Component {
art = {
selected: "uppper"
}
onChange() {
console.log("Click")
}
render() {
return (
<form onS
浏览 0提问于2019-08-12得票数 0
4回答
酶、ReactTestUtils和反应试验的差异--库
reactjs、enzyme、react-testing-library
用于反应测试的酶、ReactTestUtils和反应测试库有什么区别？
ReactTestUtils文档说：
ReactTestUtils使在您选择的测试框架中测试反应组件变得容易。
酶的文件只是说：
酶是一种用于React的JavaScript测试工具，它使断言、操作和遍历反应组件的输出变得更容易。
反应-测试-库文件：
反应测试库是一个非常轻的解决方案，用于测试反应元件.它提供了轻的实用功能之上的反应-多玛。
为什么每一种解决方案实际上都比较容易，而另一种解决方案却无法实现？
浏览 6提问于2019-01-11得票数 88
回答已采纳
3回答
对React中的类属性使用Arrow函数。不清楚
reactjs、this、arrow-functions、class-properties
我在React组件中遇到了用作Class属性的箭头函数特性。通过在线查看，我发现它使代码更具可读性，而且由于箭头函数的特性，我们不必将handlEvents函数绑定到构造函数中。
即使在对类属性使用箭头函数时，我仍然必须使用bind方法，如下面的代码所示。当我移除构造函数中的绑定时，它会显示控制台Warning: A component is changing an uncontrolled input of type text to be controlled.中的错误，并且表单错误也不会出现。
class Contact extends Component {
constructo
浏览 0提问于2018-11-15得票数 5
回答已采纳
1回答
ES6方法未在创建反应应用程序中定义。
javascript、reactjs、es6-class、create-react-app
我很难理解为什么create-react-app无法编译，并告诉我error 'updateWord' is not defined no-undef。我对ES6的反应很新鲜。通常，我会编写一个像const App = React.createClass({ });这样的组件，但是我决定尝试一些语法糖。
我有父组件App和子组件Input
class App extends Component {
constructor(props) {
super(props);
// all other code omitted...
}
handleIn
浏览 3提问于2016-10-18得票数 2
回答已采纳
3回答
在箭头函数中未定义
reactjs、forms、error-handling、undefined、this
我正在创建一个包含有提交按钮的表单的组件。在表单的OnSubmit中，我调用一个箭头函数。在这个函数中，我将对象称为" this“，但我得到了它未定义的错误消息。但是，如果我只是在表单的console.log中执行一个OnSubmit，而不是调用箭头函数，那么就定义了这个函数。有人知道如何解决这个问题吗？我实际上是在遵循react/ethereum课程，即使指导员的代码在他的视频中工作，当我使用它时，他的代码也不起作用。
import React, {Component} from 'react';
import { Button, Form, Input, Messa
浏览 8提问于2022-01-24得票数 0
回答已采纳
2回答
无法读取未定义单位测试酶的属性“contextTypes”
unit-testing、reactjs、redux、react-redux、enzyme
我正在使用redux应用程序在我的反应中尝试单元测试。因此，我需要测试连接的组件，不幸的是，我得到了这个错误：
无法读取未定义的属性“contextTypes”--我在单元测试中使用酶--这里是我的组件：
import React from 'react';
import TextFieldGroup from '../common/TextFieldGroup';
import validateInput from '../../server/validations/login';
import { co
浏览 5提问于2017-01-31得票数 5
回答已采纳
3回答
使用类型记录和JSX响应事件处理程序
typescript、reactjs
我在用TypeScript编写的React组件中更新状态时遇到了问题(使用加载项0.13.3，类型记录1.6.0-dev.20150804，来自的定义文件)。
/// <reference path="react/react-addons.d.ts" />
import React = require("react/addons");
interface AppState {
}
interface TestState {
liked: boolean,
name: string
}
class Tester extends R
浏览 2提问于2015-08-12得票数 18
回答已采纳
1回答
如何测试使用样式化组件构建的组件
reactjs、jestjs、tdd、enzyme
我对React测试和Jest和酶都是新手。我正在尝试首先学习如何使用TDD方法，因此，我正在开始编码之前构建我的测试。我所做的是在React中创建了一个示例应用程序，并安装了酶依赖性，然后我编写了测试：
import { shallow } from "enzyme";
import React from "react";
import AppLayout from "./AppLayout";
import { ContentLayout } from "./styles";
it("renders <AppLa
浏览 2提问于2020-04-24得票数 1
1回答
使用React 18和RTL发布具有三元返回的功能组件
javascript、reactjs、unit-testing、jestjs、react-testing-library
我尝试过几种方法来正确地完成这个任务，但是缺乏测试经验来捕捉我所缺少的东西。我有一个LoginForm.tsx组件，它在内部使用React.useState()保存一些事件处理程序和几个本地状态。该组件返回一个三元语句，有条件地呈现两个组件，在其中一个组件中，该组件根据另一个布尔条件呈现不同的内容。
authSuccess：当false时，主组件返回<Card />组件；当true时，组件返回<Navigate to={...} replace />以将用户重定向到account.
isLoading：当false时，<Card />的子元素是表单内容，当t
浏览 4提问于2022-11-26得票数 0
回答已采纳
4回答
更新组件以反映数据的变化？
javascript、reactjs、http、state
尝试在" create“组件中创建一个新的Note，发送一个POST请求并将其添加到数据库中。现在，我需要将更改反映在"App“组件的状态中。
解决方案:在向数据库提交Note (Create )时，将对象的副本发送到App.js，在那里我们更新note属性状态，以便它反映数据库中的更改。
问题:得到一些错误，问题行被标记在代码中。
class App extends Component{
state = {
notes: []
}
componentDidMount(){
fetch('http://localhost:30
浏览 2提问于2019-10-24得票数 0
回答已采纳
2回答
用箭头函数格式使用function生命周期方法的利弊
javascript、reactjs
我使用公共类字段语法(handler = () => {...})来定义所有React的事件处理程序，这样我就可以对组件使用this，而无需在constructor中绑定它们。我想知道我是否也可以使用这个语法来使用React生命周期方法？以这样的方式使用componentWillMount：componentWillMount = () => {...}
如果用箭头函数定义react的生命周期方法，其利弊是什么？
浏览 0提问于2018-02-01得票数 5
回答已采纳
2回答
为什么onSubmit不能使用React ES6语法？
javascript、reactjs、react-props、react-state、react-state-management
我是React世界的新手。实际上，我遇到了一种情况。当我使用现代语法时，我无法完成任务。但是，使用bind.this方法，一切都很顺利。下面是我的代码。你能找出错误吗？它给出了类似于“无法找到未定义的状态”的错误。谢谢。
import React, { Component } from 'react';
class Login extends Component {
state = {
email: '',
password: '',
}
handleChange = e
浏览 1提问于2020-07-10得票数 0
1回答
React窗体元素如何获得事件参数
javascript、reactjs
我有一个这样的表单组件：
import React from 'react';
class CommentBox extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
}
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<form onSubmit={this.ha
浏览 0提问于2019-05-14得票数 1
回答已采纳
1回答
如何使用与组件的转换使其在单元测试中有用
reactjs、jestjs、enzyme
大多数组件如下所示：
import React, { Component } from "react";
import { withTranslation } from "react-i18next";
class XYZ extends Component {
constructor(props) {
super(props);
this.state = {
};
}
.....
.....
render() {
const { t } = this.props;
return (
浏览 4提问于2020-01-16得票数 0
回答已采纳
1回答
js中函数的上下文可见性(React.js)
javascript、reactjs
您能解释为什么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
回答已采纳
2回答
React this.setState未定义
javascript、reactjs
这是一个未完成的类版本，但是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
回答已采纳
2回答
使用jest和反应测试库的测试方法
reactjs、jestjs、react-testing-library
我不能得到答案，为什么不能使用jest和react-testing-library在react中访问函数组件中的方法。 我试过用酶，但我发现一切都变成了RTL。 import React from "react";
const simpleComponents = (props) => {
const simpleMethod = () =>{
// method logic
};
return <h1>test</h1>;
};
}
export default simpleCom
浏览 19提问于2020-04-19得票数 1
5回答
ES6函数、箭头函数和ES6类中的“this”
javascript、reactjs、ecmascript-6、es6-class、arrow-functions
class App extends Component {
constructor(props) {
...
}
onChange = (e) => this.setState({term: e.target.value})
onSubmit(e){
e.preventDefault();
const api_key = "C1hha1quJAQZf2JUlK";
const url = `http://api.giphy.com/v1/gifs/search?q=${this.state.term}&api_k
浏览 0提问于2018-02-22得票数 8
回答已采纳
5回答
ES2015类“不是自动绑定”吗？
javascript、reactjs、ecmascript-6
我使用React已经有一段时间了，我已经习惯了这样的概念，即我必须手动将组件方法绑定到组件实例，因为React决定在非自动绑定中是“惯用”的：
因此，我们决定不让这个内置的React类模型。如果需要，仍然可以在构造函数中显式地预绑定方法。
类计数器扩展React.Component {构造函数(){ super()；this.tick = this.tick.bind(this)；}蜱(){.} }
我们可以在这个例子中清楚地看到这一点的影响，从类似的问题：
然而，最近有人问我，基于原型的类和新的、类之间是否有什么区别。直观地说，这个答案应该是一个强调的“不！”，因为生成的实
浏览 7提问于2016-10-29得票数 7
回答已采纳
2回答
TypeError: e.persist不是Typeahead Bootstrap React中的函数
react-bootstrap-typeahead
当我尝试用不同的方法在酶中测试我的应用程序时，我得到了错误TypeError: e.persist is not a function，但似乎什么都不起作用。
Input.prop(‘onChange’)({目标：{value：“value name”，名称："namehere"，占位符："placeholderhere"}})；
input.simulate('change'，{目标：{value：“value name”，name："namehere"，placeholder："placeholderhere"
浏览 1提问于2020-03-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
