React onChange事件返回TypeError: props.handleChange不是函数
是一个常见的错误，通常是由于props.handleChange没有正确地传递或定义导致的。以下是可能导致此错误的几种常见情况和解决方法：
- 确保props.handleChange被正确地传递给React组件：
- 在父组件中，确保将handleChange函数作为props传递给子组件。例如：
<ChildComponent handleChange={this.handleChange} /> - 在子组件中，确保通过props接收handleChange函数。例如：
const { handleChange } = this.props;
- 在父组件中，确保将handleChange函数作为props传递给子组件。例如：
- 确保props.handleChange是一个函数：
- 在定义handleChange函数时，确保它是一个函数。例如：
handleChange = (event) => { ... } - 在传递handleChange函数时，确保它是一个函数。例如：
<ChildComponent handleChange={() => this.handleChange} />
- 在定义handleChange函数时，确保它是一个函数。例如：
- 检查组件中的事件绑定：
- 确保在组件中正确地绑定onChange事件。例如：
<input type="text" onChange={props.handleChange} />
- 确保在组件中正确地绑定onChange事件。例如：
如果以上解决方法都没有解决问题，可能还有其他原因导致错误。在这种情况下，可以进一步检查以下内容：
- 确保handleChange函数在组件中正确地定义和实现。
- 检查是否有其他地方修改了props.handleChange的值，导致其不再是一个函数。
- 检查是否有其他地方重复定义了handleChange函数，导致冲突。
总结： React onChange事件返回TypeError: props.handleChange不是函数通常是由于props.handleChange没有正确地传递或定义导致的。确保正确传递和定义handleChange函数，并检查事件绑定是否正确。如果问题仍然存在，可以进一步检查函数的定义和其他可能的冲突。
相关·内容
3回答
我有两个文件:处理状态的App.js和Counter.js。显示所有内容，接受onChange不会更新输入中的值。我在柜台上做错什么了？我应该用不同的方式来处理它吗？
import React, { Component } from 'react';
import Counter from './components/Counter';
import './App.css';
class App extends Component {
state = {
cost: 0,
houseCost: 0,
downPay
浏览 0提问于2018-11-05得票数 0
回答已采纳
1回答
handleCostChange函数是基于输入计算抵押贷款支付的函数。它目前返回NAN- -我第一次用JavaScript编写它，它运行得很好。当我试图从Javascript中重构这个函数并将它添加到我的refactor组件中时，我试图找出哪里出了问题。
import React, { Component } from 'react';
import Counter from './components/Counter';
import './App.css';
class App extends Component {
state =
浏览 1提问于2018-11-05得票数 0
回答已采纳
我创建了一个名为handleChange的简单类方法，在App类下使用参数id。 我尝试从一个名为TodoItem的子函数组件调用这个handleChange方法。 当我单击复选框时，浏览器返回一个说明props.handleChange(props.item.id) is not a function的TypeError，如下图所示： ? 有人能解释一下我在TodoItem中的代码出了什么问题吗？ App类组件： import React, { Component } from "react";
import TodoItem from "./TodoIte
浏览 10提问于2020-04-08得票数 0
回答已采纳
我正在学习，我已经定义了一个onChange事件道具。但下面提到的是错误。
Input.tsx
type InputProps ={
value: string,
handleChange: (event:React.ChangeEventHandler<HTMLInputElement>)=> void;
}
export const Input = (props: InputProps) =>{
const handleInputChange:React.ChangeEventHandler<HTMLInputElement>
浏览 19提问于2022-09-05得票数 -1
回答已采纳
1回答
用动态生成的形式管理状态
、、、
我有一个组件，它从api中获取一个json问题列表。然后有5个单选按钮来回答每个问题(从“强烈反对”到“强烈同意”)。
这些问题在componentDidMount()中获取，存储在this.state.questions中，并在render()中映射到questionComponents。组件(和单选按钮)由键标识。
我需要将答案作为一个数组存储在状态中。这显然必须发生在handleChange中，但我不知道如何做到这一点。我对此反应很新，所以可能有比我现在做的更简单的方法。
这是App.js
import React from 'react';
import Questio
浏览 0提问于2020-04-30得票数 1
回答已采纳
1回答
我在React中创建了一个简单的表单，我正在使用Jest来练习我的单元测试。我目前正在测试表单组件，该组件将输入值呈现到DOM中，由于TypeError:无法读取未定义的属性'firstName‘，它一直失败。我的目标是让所有的输入标签都能够通过。
FormComponent.js
import React from 'react'
const FormComponent = (props) => {
return (
<main>
<form>
<input type="t
浏览 0提问于2020-11-04得票数 0
我试图使用[event.target.name]:event.target.value绑定我的数组值
但我知道这个错误：
TypeError:无法读取未定义属性的“名称”。
下面是我的代码：
数组
const [data, setData] = useState({
email: '', first_name: '', last_name: '', occupation: '',
farm_description: '', farm_name: '', user
浏览 3提问于2020-11-20得票数 0
回答已采纳
App.js (父组件)
import React from "react";
import TodoItem from "./TodoItem";
import todosData from "./todosData";
import "./styles.css";
class App extends React.Component {
constructor() {
super();
this.state = {
todos: todosData
};
this.handleC
浏览 6提问于2020-09-15得票数 1
回答已采纳
我的工作是一个反应项目，因为我有三个组成部分的家庭，学生名单，卡片。
在这个项目中，学生列表是卡片组件的父级，卡片组件也是子组件
学习列表组件。现在我正在尝试将handlSubmit和handleChange函数从
通过使用道具将组件学习到卡片组件。但效果不太好。
请帮助我将handleSubmit & handleChange函数从父函数传递给
有反应的孩子。
我是Studentslist.js
import React, { useState } from 'react';
import axios from 'axios';
import '
浏览 2提问于2020-03-25得票数 1
回答已采纳
我是新的反应，我有一个问题的handleChange函数。
我的程序加载了一个包含jsonplaceholder数据的用户列表，并有'Edit‘按钮，点击这个按钮一个表单就会出现在所选用户的数据中。
Problem：当我尝试编辑某些字段时，表单“刷新”。
//User.js (contains the function)
import React from 'react';
import UserEdit from './components/UserEdit';
import UsersList from './components/Us
浏览 0提问于2019-07-18得票数 0
回答已采纳
我需要在另一个组件中使用我的状态，我将其与类似的道具一起发送。 好的，这是我的./HandleForm容器。 import React, { PureComponent } from "react";
import NotLoggedRegisterForm from "./NotLoggedRegisterForm";
export default class HandleForm extends PureComponent {
state = {
data: {
email: "",
password
浏览 7提问于2018-12-23得票数 0
回答已采纳
2回答
在控制表单元素的官方之后，我成功地将以下内容组合在一起，但我将复选框保存在一个单独的函数中：
我有一个名为CheckBox()的函数，其中保留复选框：
function CheckBox(props){
return(
<div>
<p>Check all that apply:</p>
<label>
<input type="checkbox" name="a" checked={props.a} on
浏览 1提问于2018-05-15得票数 1
回答已采纳
我的程序加载了一个用户列表(带有jsonplaceholder数据)，并且我试图使这个数据可编辑，但是给出了一个错误：
TypeError:无法读取未定义的属性“街道”
有人能帮忙吗？
class Users extends React.Component {
constructor(){
super();
this.state = {
users: [],
displayList: 'block',
displayForm: 'none',
edit: false,
us
浏览 0提问于2019-07-17得票数 1
回答已采纳
我有一个容器组件，它呈现一个带有输入的子组件。我想在onChange事件期间访问子组件的值，但是我得到的是一个“代理”对象，而不是输入值。
容器组件
...
class InputContainer extends React.Component {
handleChange = (val) => {
console.log(val);
// => Proxy { [[Handler]]: Object, [[Target]]: SyntheticEvent, [[isRevoked]]: false }
}
rend
浏览 6提问于2016-08-12得票数 10
回答已采纳
1回答
我尝试根据输入字段的值( react js中的受控组件)来设置状态，但是一旦我尝试更改输入字段的值，事件总是导致未定义的结果。
App.js
initialState = {
set: {
team1Score: 5,
team2Score: 6,
},
};
handleChange(e) {
this.setState({
set: {
team1Score: e.target.value,
tea
浏览 11提问于2017-07-13得票数 1
回答已采纳
我使用的是React 16.13.0。我有以下组件... import React from 'react';
import {FormControl, FormLabel} from 'react-bootstrap';
const Input = (props) => {
return (
<div className="form-group">
<FormLabel>{props.title}</FormLabel>
<FormControl
浏览 3提问于2020-03-27得票数 0
回答已采纳
问题：
我有选择输入在我的Formik形式在反应。我的代码如下
<select
className="form-control offence-select"
id="exampleFormControlSelect1"
value={props.values.offenceId}
onChange={props.handleChange("offenceId")}
onBlur={props.handleBlur("offenceId")}
>
<option
浏览 5提问于2020-04-23得票数 7
回答已采纳
我正在尝试将事件处理程序传递给父组件，因此我编写了以下代码： import React, { useState } from "react";
export default function App() {
const [val, setVal] = useState("");
function handleChange(event) {
console.log(event.target);
setVal(event.target.value);
}
return (
<div className=
浏览 11提问于2020-10-25得票数 1
回答已采纳
这是在我的google浏览器控制台上显示的错误：
警告:错误的道具类型：value在TextInput中被标记为必需，但它的值是undefined。
下面是代码：
text-input.jsx
import React from 'react';
import PropTypes from 'prop-types';
const TextInput = (props) => (
<div className="form-group">
<label htmlFor={props.name}>{props.
浏览 5提问于2021-07-20得票数 2
我有两个组件，Edit(子组件)和Index(父组件)。Edit组件中有三个输入框，我想：
componentCompare 将这三个参考文献传递给索引，这些输入是通过参考文献(特别是在HandleUpdate函数中)获得的
Edit.js
<form onSubmit={props.handleUpdate}>
<input
className=""
name="name"
ref={props.setRef}
浏览 2提问于2020-05-05得票数 0
我的代码如下-
Home.js
import React from 'react'
import AddNewTask from './../components/addNewTask'
class Home extends React.Component{
constructor(props){
super(props)
this.state = {
addNewTask:{
title:'',
discriptio
浏览 2提问于2020-05-28得票数 0
回答已采纳
我尝试从“状态”对象设置选项，该对象具有包含课程array.This值在设置状态时丢失的初始数据。我在代码中添加了注释行。
提前感谢您的帮助。
用于输入Input.jsx
import React from 'react';
const Input = (props) => (
<div className="form-group">
<label htmlFor={props.name} className="form-label&
浏览 1提问于2020-07-09得票数 1
5回答
我试图访问我的eventhandler，它有一个参数Id，但我得到了这个错误。我试图重写代码，但我得到了相同的错误。当我尝试支持id时，我发现我做错了什么，但我不确定。
import React from "react";
function Props(props) {
return (
<div>
<h3>
<input
type="checkbox"
checked={props.todoItem.completed}
onCh
浏览 0提问于2020-01-17得票数 0
我正在使用本指南在使用Typescript version 4.1.2：https://dev.to/sametweb/how-to-create-multi-step-forms-in-react-3km4的React 17.0.1应用程序中创建多步骤表单 我发现这本指南非常有帮助，而且在很大程度上，我完全理解正在发生的事情。我跳过了第六步，因为我甚至不确定我是否真的需要它来做我想做的事情。 我遵循了步骤6，并制作了与教程制作的相同的表单，它确实完全按照预期工作，但是它没有出现在适当的位置。现在表单出现在我的主屏幕上，我相信这与我在App.tsx中设置“步骤”的方式有关。这是我的主页，包括
浏览 50提问于2021-09-07得票数 2
回答已采纳
我要得到这个TypeError
TypeError: Cannot read properties of undefined (reading 'files')
却找不到解决办法。我的应用程序正在使用react，我在处理setState钩子时得到了这个错误。
const handleCapImage = (event) => {
setPostImage(event.target.files[0]);
};
在我称之为React元素的地方
<input
type="file"
id="file"
浏览 19提问于2022-10-29得票数 -1
在编译："TypeError: props.theTodos.map不是函数“时，我得到了这个错误。我在这方面花了很长时间，没有一个正确的解决方案，因为我使用钩子而不是类组件。
它因为"handleChange“而破裂，但我不知道为什么
App.js...
const[todos, setTodos] = useState(todosList);
const markComplete = (id) => {
setTodos({ todos: todos.map(todo => {
if(todo.id === id) {
浏览 0提问于2019-07-10得票数 1
回答已采纳
在这里，我试图做一个CRUD过程。现在，我可以添加、删除和显示数据。但是，我无法更新现有的数据。我想更新或编辑现有的数据。为了达到这个目的，我尝试了不同的方法，但是没有一种可行。请检查我下面的代码，让我知道，我怎么做。
App组件：
import React, { Component } from 'react';
import { withStyles, Grid } from '@material-ui/core';
import styles from './Style'
import Form from './Form';
浏览 0提问于2019-06-27得票数 2
回答已采纳
1回答
在onChange中响应测试功能
、、、、
我有以下无状态组件：
import React from 'react';
const Input = ({ name, onChange, type }) => (
<input
name={name}
onChange={onChange}
type={type} />
);
export default Input
像这样的util函数：
export const getValue = e => ({
name: e.target.getAttribute('name'),
val
浏览 0提问于2018-05-10得票数 0
回答已采纳
在antd with react中，如果我有下面这样的内容，那么一切都很好：
<Form>
<Form.Input>
<SomeIntermadiateComp/>
...
一些中间组件看起来如下：
const SomeIntermadiateComp = React.forwardRef(({ value, onChange }: Props, ref: any) => (
<Input
ref={ref}
value={value}
onChange={(event) => {
浏览 0提问于2021-08-05得票数 0
回答已采纳
我想重新加载页面时，日期是选定的。我有个道具叫新地图。
我是个反应新手。
当日期更改时，我想在onChange时触发函数(“刷新映射”)：
import React, { Component } from 'react';
import DateTimePicker from 'react-datetime-picker';
import MapLeaflet2 from './MapLeaflet2';
class Picker extends Component {
state = {
date: new Date(),
浏览 3提问于2020-04-07得票数 0
1回答
我在react应用程序中遇到了redux的问题。我配置了存储。我有2个组件登录和布局组件。我已经为异步操作添加了redux-thunk依赖(我的问题就在这里)，react- redux，redux等等……
我是ReactJS的新手。我从github获取了一个React示例代码(Material-UI主题仪表板应用程序)，它工作正常。我开发了一个小的React应用程序。我从仪表板应用程序中复制了一些代码，并将其用于我的应用程序中。问题来了，它说错了:动作必须是纯对象。对异步操作使用自定义中间件。代码如下...
LoginState.jsx
const initialState = {
isU
浏览 8提问于2019-06-26得票数 0
我有一个React文件，它将一个城市数据列表显示为一个组件。它上面有一个输入文本框，需要接受用户输入。我使用状态在文本框中显示一个初始字符串，但我无法让onChange成功地将一个函数用于setState。使用console.log对其进行故障排除--我可以看到，当我试图更改onChange所指向的函数的状态时，它确实工作并更改了一个字母，但是状态恢复到了它的默认值。问题似乎在于setState没有保存更改，并在进行任何更改后恢复到初始状态。文本框内容似乎一点也不改变，认为console.log显示了一个字母更改，然后恢复到原来的状态。
如何更新状态？我希望用户能够输入一个数字，然后将其与列表
浏览 1提问于2018-12-28得票数 0
回答已采纳
我对React和JavaScript非常陌生，我正在尝试获取react选择下拉选项的值，以便在过滤器中使用。下面的代码抛出“未定义的TypeError: event.target”。
const [filter, setFilters] = useState({})
const handleFilters = (event)=> {
const value = event.target.value;
setFilters({
[event.target.name]: value,
});
};
console.log(filter);
浏览 14提问于2022-04-20得票数 1
我正在创建一个多步骤形式的反应。父组件有3个子组件，它们是表单的步骤。在第一步中，我有4个文本输入，需要一个复选框来允许wpp通信，问题是当单击时，我无法将复选框的状态设置为true。父组件如下所示：
import React from 'react';
import FormStep0 from './formStepZero';
import FormStep1 from './formStepOne';
class VendeForm extends React.Component {
constructor(props) {
浏览 1提问于2022-06-28得票数 1
回答已采纳
我有一个相当大的表单，里面有很多文本框，里面大约有60-70个文本框。
当然，它开始滞后，我知道重呈现可能是一个问题，也是所有值都处于组件状态的原因。我不知道如何正确地分割它，也不知道该如何解决这个问题。
主组件->视图
const [values, setValues] = useState({
value1: '',
...
value60: '',
});
return (
<div className={classes.root}>
<form>
&l
浏览 2提问于2021-10-15得票数 0
3回答
我希望将此react组件中的箭头样式函数(at onChange)更改为普通函数。我是个初学者，同时看到这两个版本对我很有帮助，因为我很难掌握新箭头函数语法的诀窍。
这应该是可能的，但下面的会是如何使用“普通”函数呢？
import React from "react";
function Input1(props) {
//console.log(props)
return (
<div>
<input
onChange={event => props.handleChange("email"
浏览 2提问于2019-09-25得票数 2
回答已采纳
我有一个类，我在其中声明：
constructor() {
super();
this.state = {
checked: false,
house: [],
selectedHouse: null
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(checked) {
this.setState({ checked });
}
render() {
return (
<React.Fragment>
<TSwit
浏览 1提问于2020-04-12得票数 2
您可以从下面的代码块中看到，在Description.js中，我必须传递一个名为"index"的支柱，因为handleChange是一个必须用两个参数handleChange(newValue,index)调用的函数。
handleChange函数更新状态，在本例中，状态是一个如果长度为3的数组(每个输入只有一个值)。
由于Description.js组件创建了index，所以我不得不将其作为道具传递。
它的工作原理是预期的。
问题
这是个糟糕的做法吗？index是否某种程度上是一个保留词(指React、Javascript或HTML)？
有没有更好的方法来解决这个问题？
A
浏览 1提问于2019-05-27得票数 3
回答已采纳
1回答
新年快乐！我正在尝试使用一个类子组件到一个功能组件中，但我不知道如何在它中使用道具。我有一个图片类组件，我正在我的SignUp无状态组件中导入，以便用户上传图片和其他凭据并创建新的用户配置文件。 这是我的图片组件： import React, { Component } from 'react';
export default class Picture extends Component {
constructor(props) {
super(props);
this.state={
file:null
}
this.
浏览 10提问于2021-01-05得票数 1
4回答
下面是我正在编写的一个React类： import React from 'react';
export default class ExpenseForm extends React.Component {
state = {
title: ''
};
onTitleChange = (e) => {
const title = e.target.value;
this.setState(() => ({title}));
};
render() {
浏览 41提问于2020-02-19得票数 1
回答已采纳
给定一个基本组件和一个自定义的handleChange()函数，“id”的参数在App.js中来自哪里？我知道所有事件函数都会接收一个事件属性作为参数，但是“id”是从哪里来的呢？这是否意味着我在给定的基于类的组件中编写的所有自定义函数都将接收事件参数之外的参数？
App.js组件
import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"
class App extends React.Component {
浏览 0提问于2019-03-19得票数 0
我想做一个简单的应用程序与反应。由于某些原因，每次尝试切换todo元素isCompleted状态，我都会得到一个错误：
TypeError:无法读取未定义的属性“isCompleted”--响应简单的todo应用程序
React调试器突出显示第37和41行。老实说，我找不到它不起作用的原因，似乎setState在toggleTodo中破坏了什么东西。
import React, { Component } from 'react';
const Input = (props) => {
return (
<form onSubmit={props.ad
浏览 2提问于2018-01-24得票数 0
回答已采纳
1回答
我不熟悉JavaScript的反应。为什么这个非常简单的For循环不能像预期的那样工作呢？很明显，我期望它可以Console.Log amountOfPeople的值，但是当我将amountOfPeople更改为2时，由于某种原因，它会被计算为20。同样，当我将它更改为3、4、5等时，它会乘以10。
这是我的App.js:
import React from "react"
import Main from "./components/Main"
function App() {
const [amountOfPeople, setAmountOfPeo
浏览 2提问于2021-06-29得票数 0
回答已采纳
我试图捕获输入的onChange事件，并使用新值调用setState，但一旦输入输入，就会得到：
Uncaught TypeError: Cannot read property 'setState' of undefined
即使我打过电话
this.handleChange.bind(this)
在构造函数中
index.js
import React from 'react'
import * as ReactDOM from "react-dom";
import App from './App'
ReactDOM.
浏览 3提问于2016-12-29得票数 3
回答已采纳
React组件有问题。也许有人知道这是怎么回事。我在项目中使用react-datepicker库来填充客户端的日期输入。所有表单输入都有效，但当我尝试在日历下拉菜单中选择日期时出现错误。
我是一个新的反应，也许在与国家一起工作中有某种错误。如果有任何帮助，我将不胜感激！
下面是清单：
import React, { Component } from 'react';
import axios from 'axios';
import DatePicker from "react-datepicker";
import "react-dat
浏览 17提问于2019-08-12得票数 2
回答已采纳
1回答
第一个例子
HTML:在下面的示例中，当文本框为时，将触发()，并按下enter。
<input type="text" onchange="console.log(1)" />
React:在下面的示例中，当加载console.log()页面时，只触发一次()。
function App() {
return (
<input type="text" onChange={console.log(1)} />
);
}
export default App;
第二个例子
在本例中，我将consol
浏览 2提问于2021-04-08得票数 1
回答已采纳
我正在使用一个构建MERN Stack应用程序("react": "^16.14.0")，该应用程序具有一个使用DatePicker ("react-datepicker": "^4.2.1")设置日期范围的表单。目前，正在选择日期的值，但名称尚未定义。这是在选择日期时抛出TypeError并使应用程序崩溃。如何将e.target.name设置为startDate和endDate？ TyperError react-dom.development.js:327
Uncaught TypeError: Cannot read p
浏览 46提问于2021-10-04得票数 0
回答已采纳
1回答
在运行以下代码时，我发现props.handleChange不是一个函数。单击复选框时，我正在尝试更新状态。复选框所在的字段称为myNetwork。我想，NetworkArray组件，作为卡片组件的父组件，什么时候可以访问应用程序中的函数和状态？但这是我的第一个React应用。我到底做错了什么？ App.JS import React, {Component} from 'react';
import SignUp from './components/SignUp';
import NetworkArray from './components/Ne
浏览 10提问于2019-10-18得票数 0
1回答
我正在编写一个包含表单的react组件，其中包含单选按钮。我尝试创建onChange()和handleSubmit()函数，这些函数将收集所选按钮的值，并将其值记录在控制台上，但是事件对象没有被识别，我得到了以下错误：
未定义TypeError:无法读取未定义属性的“目标”
为什么会发生这种情况，我现在能做些什么？
这是我的代码：
class NoteInput extends React.Component {
constructor(props) {
super(props);
this.state={
select
浏览 1提问于2017-12-09得票数 0
我是新来的，还在练习反应。我的输入表单有问题，每当我输入任何键时，我总是得到TypeError:无法读取属性值为null
这是我的密码：
import React, { useState } from 'react';
export default function FormPractice() {
const [isDefault, setIsDefault] = useState('');
const [balance, setBalance] = useState({amount: null});
return (
<div classNam
浏览 2提问于2020-05-18得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
