handleChange不是函数，react
handleChange是React中的一个事件处理函数，用于处理表单元素的值变化。它通常用于监听用户在表单输入框中输入的内容，并将输入的值更新到组件的状态中。
在React中，表单元素的值是由组件的状态（state）来管理的。当用户在输入框中输入内容时，handleChange函数会被触发，通过调用setState方法来更新组件的状态，从而实现实时更新输入框的值。
handleChange函数的定义可以如下：
handleChange(event) {
this.setState({ inputValue: event.target.value });
}其中，event参数是一个事件对象，通过event.target.value可以获取到用户输入的值。inputValue是组件的状态属性，通过setState方法更新该属性的值。
handleChange函数的应用场景非常广泛，可以用于处理各种表单元素的值变化，例如文本输入框、复选框、单选框、下拉框等。
腾讯云提供了一系列与React相关的产品和服务，例如云服务器、云数据库、云存储等，可以帮助开发者构建基于React的应用。具体产品介绍和相关链接如下：
- 云服务器（CVM）：提供可扩展的虚拟服务器，支持多种操作系统和应用场景。产品介绍链接
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，适用于存储和管理应用程序的数据。产品介绍链接
- 云对象存储（COS）：提供安全可靠的对象存储服务，用于存储和管理大规模的非结构化数据。产品介绍链接
- 云函数（SCF）：无服务器计算服务，支持以事件驱动的方式运行代码，用于构建弹性、可扩展的后端逻辑。产品介绍链接
- 人工智能服务（AI）：提供多种人工智能能力，如语音识别、图像识别、自然语言处理等，可用于增强应用的智能化能力。产品介绍链接
以上是腾讯云提供的一些与React相关的产品和服务，可以根据具体需求选择适合的产品来支持React应用的开发和部署。
相关·内容
我创建了一个名为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
回答已采纳
1回答
我正在尝试将下面的class component转换为function component with hooks，到目前为止，我没有成功。
我看不到页面上的任何错误，也看不到页面上的终端，但我的目标是在页面上看到表单，但目前没有显示表单。
类组件
# PARENT
import React, { Component } from 'react';
import PersonalInfo from './PersonalInfo';
import AllInfo from './AllInfo';
class Main extends Comp
浏览 1提问于2020-05-29得票数 1
回答已采纳
错误:React钩子"useInput“在不是React函数组件的函数"main”中调用
import React, { useState } from "react";
function useInput(initialvalue = "") {
const [state, handleChange] = useState(initialvalue);
const Change = e => {
handleChange(state(e.target.value));
};
return [state, Ch
浏览 1提问于2019-09-03得票数 1
我有下面的单选按钮组件
import React from 'react';
import PropTypes from 'prop-types';
export default class RadioButton extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange = (event) => {
浏览 0提问于2018-12-12得票数 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
回答已采纳
我在react中是新手，我遇到了这个问题，这里是我的构造函数：
constructor(props){
super(props)
this.handleChange = this.handleChange.bind(this)
this.state={
user: {},
email: "",
password: ""
}}
当我从输入调用我的方法handleChange时：
<Input name="email" type="email" placeholder="Email"
浏览 3提问于2020-05-05得票数 0
回答已采纳
3回答
我在学习反应。在我看来，就像React的官方中的下面这个例子一样
function withSubscription(WrappedComponent, selectData) {
// ...and returns another component...
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
浏览 0提问于2018-01-20得票数 2
回答已采纳
1回答
最近，我开始在教程的帮助下学习ReactJS，我遇到了一个错误，我自己找不到解决方案。我决定要做的第一个项目之一是“要做”列表，当我试图将"handleChange“函数作为我的组件的支柱时，我得到了这个错误TypeError: Cannot read property 'handleChange' of undefined。
下面是我对App类的完整代码，这样您就可以看到我想做的事情了：
import React from 'react';
import './App.css';
import Content from "./C
浏览 0提问于2020-10-06得票数 2
回答已采纳
您可以从下面的代码块中看到，在Description.js中，我必须传递一个名为"index"的支柱，因为handleChange是一个必须用两个参数handleChange(newValue,index)调用的函数。
handleChange函数更新状态，在本例中，状态是一个如果长度为3的数组(每个输入只有一个值)。
由于Description.js组件创建了index，所以我不得不将其作为道具传递。
它的工作原理是预期的。
问题
这是个糟糕的做法吗？index是否某种程度上是一个保留词(指React、Javascript或HTML)？
有没有更好的方法来解决这个问题？
A
浏览 1提问于2019-05-27得票数 3
回答已采纳
当我将状态保存在DatePicker本身中时，ReactJS Datepicker工作得很好，但是，一旦我提升状态，它就停止工作了--当我选择日期时，什么都不会发生。
此代码工作：
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class Datepicker ex
浏览 0提问于2019-01-14得票数 0
回答已采纳
我正在尝试在我创建的React模式中使用emailJS。这种模式工作得很好，但实际情况并非如此。下面是我的电子邮件组件，给我一个控制台错误的'handleChange是没有定义‘在控制台上单击Modal。但是，我已经在第18行对其进行了定义。
import React from 'react';
import emailjs from 'emailjs-com';
export default class ContactUs extends React.Component {
constructor(props) {
super(props
浏览 3提问于2020-07-02得票数 0
回答已采纳
我有一个这样的表单组件：
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
回答已采纳
当我按下“发送”按钮时，我想在信息页上打印从表单中得到的信息。但是，当信息被当作默认值时，它不会出现在信息页面上。
表单中的信息需要打印在Info页面上
我的App.js
import React, { useState } from 'react'
import './App.css';
import { Route, Routes } from 'react-router-dom'
import Info from './Info';
import Form from './Form';
function A
浏览 12提问于2022-11-29得票数 1
回答已采纳
2回答
我得到了这个代码。我想知道返回数组的map函数中的代码是如何实现的。大家好，我对map函数中的代码有点困惑。谁能解释一下如何返回todo对象，以及它的完成值是如何更新的。
import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"
class App extends React.Component {
constructor() {
super()
this.state =
浏览 0提问于2020-07-06得票数 0
我使用的是react第15节。使用react-datepicker库会在使用默认代码时出现问题。我已经成功地修改了代码，但是每当我单击选定的日期时，它都不会显示任何日期。下面是我的代码：
import * as React from 'react';
let DatePicker = require('react-datepicker');
import 'react-datepicker/dist/react-datepicker.css';
export default class DtePicker extends React.Compo
浏览 4提问于2020-01-02得票数 0
回答已采纳
我是新来的。上面有错误。我做错了什么？
这是我的密码：
import React from "react"
import ReactDOM from "react-dom"
import toDoLists from "./components/Array"
class Main extends React.Component {
render(){
return (
<p>
<input type="checkbox" checked={thi
浏览 0提问于2020-03-27得票数 1
回答已采纳
我编写了以下react组件
class RegistrationActivity extends React.Component {
constructor(props) {
super(props);
this.state = {activity: this.props.activities[0]}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({activity: event.target.val
浏览 1提问于2018-03-12得票数 0
回答已采纳
我正在尝试从子组件表单<Form handler = {this.handler} />更新我的状态。但当我按回车键时，当前状态值为null。我认为问题出在我的处理程序(E)函数中，但我不知道是什么原因。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form.js';
import { Button } from 'react-
浏览 37提问于2018-06-06得票数 0
我对js的反应是新手。
我有几个输入在我的形式和考虑可控的输入方法在反应，我试图做一个事件处理程序的每一个其他输入。我在堆栈溢出中引用了一些引用，并讨论了这一点。仍然无法找出为什么我无法在我的输入框内写。
这是我的密码。
import React, {Component} from 'react';
import { Grid, Row, Col , Button } from 'react-bootstrap';
class ContactForm extends Component {
constructor(props) {
super(pr
浏览 0提问于2017-09-02得票数 0
回答已采纳
我不明白为什么我需要
this.handleChange = this.handleChange.bind(this);
为了让我的计划发挥作用：
class Foo extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = { foo: 1 }
}
render() {
return (
浏览 1提问于2018-12-19得票数 6
回答已采纳
2回答
目标：在React组件内进行.this()绑定期间，我希望完全理解正在进行的引用以及计算机所采取的具体步骤。
描述：我有一些代码(下面列出)，在代码中，计算机通过行this.handleChange = this.handleChange.bind(this);绑定handleChange输入处理程序。有一个父组件MyApp，它有一个子组件GetInput和另一个子组件RenderInput。
问题：
问题1.我的困惑主要是因为我认为.this()会自动引用最近的“父”对象，并且通过.this()绑定会将其重定向到编写.bind()的最接近的父对象。在下面的例子中，它似乎重定向到MyApp组件
浏览 3提问于2019-12-12得票数 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
1回答
我正在尝试做待办事项列表。Onclick我想添加带有来自输入的值的标记p，但它给出了错误。我想这样做:我让数组进入状态，命名为items，onclick我将输入中的值添加到我的item数组中，然后作为回报，我创建了map函数，该函数返回带有文本值的标记p。我做错了什么？ class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {text: '', items: []};
this.handleChange = this.h
浏览 19提问于2019-10-05得票数 1
回答已采纳
我正在学习React，偶然发现了一个叫做高阶组件的东西，还发现了这段代码：
function withSubscription(WrappedComponent, selectData) {
// ...and returns another component...
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
浏览 0提问于2020-03-30得票数 1
我试图捕获输入的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.js的新手。我正在关注youtube上学习react.js的视频。我正在处理简单的事件处理，并且遇到了一些问题。当用户在复选框上执行onclick功能时，我想选中/取消选中该复选框。但不知何故，返回的数组没有更新，并且checkbox不可操作。我将我的代码粘贴到下面：
App.js
import React from 'react'
import Header from './components/Header'
import Todolist from './components/Todolist'
import todosDa
浏览 2提问于2021-09-26得票数 1
我想知道，在React.js中，在组件中声明匿名函数、命名函数或方法是否存在性能差异。
具体而言，以下几种方式之一是否比其他的更有表现力？
class MyComponent extends React.Component {
render() {
return (
<input
type="text"
value={foo}
onChange={(e) => {
this.setState({ foo: e.target.value });
}}
浏览 7提问于2017-03-03得票数 7
回答已采纳
我试图在它下面创建一个标题和一个文本框，使用React，ES6，Webpack和Babel。当我们在文本框中键入时，标题的内容会更改/重新呈现。
主要有两个文件，Header.js和app.js //app.js
import React from "react";
import ReactDOM from "react-dom";
import Header from "./Header/Header";
export default class App extends React.Component
{
constructor()
浏览 3提问于2016-12-25得票数 0
回答已采纳
1回答
只是想知道我怎么能解决这个问题？我听说过使用consumers，但我认为这不会解决问题，因为我需要在handleChange()函数中调用setSaveEnabled，如果要创建一个消费者，就不能在消费者内部定义这个函数。还有什么别的路我可以走吗？
我在开关组件中的handleChange()争论中调用onchange。
import SaveContext from "../../context/SaveContext";
class EnableSwitch extends Component {
constructor() {
super();
thi
浏览 6提问于2022-03-21得票数 1
回答已采纳
我正在学习React中的状态概念。我正在尝试理解使用this.handleChange和this.state.handleChange之间的区别。
如果有人能给我解释一下，两者之间的确切区别，以及为什么this.state.handleChange不能工作，我将不胜感激。
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
}
this.handleChange = this.h
浏览 0提问于2018-07-21得票数 1
在下面的代码中，我试图得到标记为"Description“的TextField，以强制文本都是大写字母。我添加了handleChange代码，但是每次我尝试输入字段时，它都会冻结我的表单。我怎么能让这个TextField成为大写字母呢？除了onChange，还有什么不同的方法吗？我可以在不使用TextField的情况下把这个大写字母全部写成onChange吗？
import * as React from "react";
import { Stack } from 'office-ui-fabric-react';
import { TextField
浏览 2提问于2020-04-01得票数 0
回答已采纳
我使用一个简单的无状态函数作为一个具有react状态的react组件。此外，我希望将每个函数保持在一个单独的位置，以使测试更容易，并且如果函数变得更大，代码就会更加可读性。
因此，在本例中，handleChange函数应该做得更多，而不是仅仅设置状态值。但是如果我把它放在函数之外，我就无法访问setMessage函数和组件的支持。
这是有用的，还是一种错误的反应方式？
example.js
import React, { useState } from 'react'
export function handleChange (event) = {
// do som
浏览 3提问于2020-05-03得票数 0
回答已采纳
未定义handleChange -当react中的rum=n页处于未定义状态时显示此信息 function ApplicationCategories() {
const options = ["Africa", "America", "Asia", "Europe"];
handleChange = (event, value) => {
console.log(value);
};
return (
<SecureLayout>
浏览 44提问于2020-07-16得票数 1
回答已采纳
我正在用react-native编写我的第一个测试应用程序，但我无法让我的语法正常工作。我不明白，我哪里做错了？
代码：
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class Form extends React.Component ({
getInitialState: function(){
return {
userEvent : ""
}
},
handleChange: f
浏览 0提问于2017-11-07得票数 0
1回答
我是react.js的新手。我对react.js中的onChange事件有一点困惑。为什么我们在通过onChange事件处理事件时不使用括号？
<input
type="text"
onChange={this.handleChange()}
/>
通常，当我们通过JavaScript处理事件时，我们会这样写
<input type="text" onclick="handleChange()"/>
浏览 1提问于2021-10-09得票数 0
我正在尝试实现一个按钮，它在两个显示的窗体之间切换。但是，这是无效的，因为在按钮单击时不会发生任何更改。我有以下代码：
import React, {Component} from "react";
import ShortenForm from "./ShortenForm";
import UnshortenForm from "./UnshortenForm";
class FormSelector extends Component {
constructor(props) {
super(props);
浏览 3提问于2020-05-10得票数 0
回答已采纳
1回答
我有一个ReactJS类，它呈现表单，并根据输入状态启用/禁用提交按钮。如果填写了所有四个字段，则启用Submit按钮，否则不会。
当我用DateTimePicker创建了4个基本输入时，它工作得很好，但是，当我从React小部件中添加react组件时，我很难做到这一点。
问题是提交按钮永远不会启用，因为一旦日期被选中，就不会调用valid()方法。
见下面的代码：
DateTimePicker = require('react-widgets/lib/DateTimePicker');
momentLocalizer = require 'react-widgets/
浏览 2提问于2015-10-23得票数 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
每当我使用箭头函数并且没有将方法绑定到类构造函数中的“handleChange”时，我就会收到一个错误，说它是未定义的。我在看一个教程，讲师说我们可以使用箭头函数来定义我们自己的方法，以克服将方法绑定到"this“的问题。以下是我的代码：
import React, { Component } from 'react';
//import logo from './logo.svg';
import './App.css';
import CardList from "./cardlist_component";
impo
浏览 1提问于2021-03-01得票数 0
2回答
我正在读关于“提升状态”的“反应”。它将Calculator组件定义如下：
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
}
handleChange(e) {
this.setState({temperature: e.target.value});
}
浏览 4提问于2020-02-21得票数 0
回答已采纳
我试着练习反应形式，但我似乎解决不了这个错误。我已经开发了一个多输入表单，我需要这个值来更新父状态。当我开始键入输入字段时，它会触发开关大小写默认值。我不确定我是否输入了'handleChange‘函数，或者是否应该为state.data设置一个单独的状态。如有任何建议，将不胜感激。
import React, { useState } from 'react';
import Form from './Form';
import Results from './Results';
function App() {
const
浏览 2提问于2020-03-31得票数 1
回答已采纳
我正在尝试将事件处理程序传递给父组件，因此我编写了以下代码： 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
回答已采纳
我试着用玩笑开始做一些单元测试，但是我遇到了一个错误，很多人似乎都在接受这个错误，但我似乎找不出答案。
下面是我要做的事情(我意识到需求不受支持)：
jest.mock("../widgets/", () => {
return <button>button</button>;
});
describe('TextInput', () => {
describe('when user inputs a value', () => {
it('calls correct funct
浏览 0提问于2018-10-26得票数 1
回答已采纳
2回答
我只是想用多个复选框的handleChange方法来更改我的应用程序的状态。
当我点击我的每个复选框时，我的状态从假变为真，但是当我取消选中它时，我的状态并没有改变来反映它，我似乎不知道为什么！
import React, { Component } from "react";
export class StepOne extends Component {
constructor(props) {
super(props);
this.state = {
box1: false,
box
浏览 0提问于2020-04-28得票数 2
回答已采纳
我有一个自定义输入组件，如下所示： import React, { useState, useCallback } from 'react'
function MyCustomInput ({value: initialValue = '0'}) {
const [value, setValue] = useState(initialValue)
const handleChange = useCallback(
value => {
setValue(value)
},
[setValue]
)
浏览 27提问于2020-01-06得票数 0
回答已采纳
2回答
我试图遍历从Ajax请求中接收到的对象数组。由于某些原因，我无法使用map函数，尽管我确信我的数据是一个数组。我只是在学习，反应，知道一定有一些基本的概念，我错过了，但无法弄清楚。
这是我的密码。
import React from 'react';
import axios from 'axios';
class Search extends React.Component {
constructor(props) {
super(props);
this.state = {value: '', searchVal: 'No
浏览 0提问于2018-01-30得票数 0
回答已采纳
我需要移动列表上的项目时，他们是点击。我试过更新这个州，但没有奏效。
import React from "react";
import ReactDOM from "react-dom";
// props is an array of items
const List = (props) => {
// Move the items up when they are clicked
const { items } = props;
const [index, setIndex] = React.useState(0);
con
浏览 7提问于2022-09-22得票数 0
2回答
我试图更新状态的反应，只有在表单提交后。我有一个html表单，其中有一个文本输入和一个提交按钮，但它需要点击2提交按钮，实际上改变状态的反应。我使用了handleSubmit和handleChange两种方法。
handleChange查找输入字段中的更改，并相应地更新状态。
handleSubmit在表单提交时将handleChange更新的状态追加到数组中
状态包含{ itemslist：[]，currentitem："“}
当单击第一次提交按钮时，它会给出项的先前值(或空数组)，第二次则给出输入字段中存在值的数组。
下面是我的完整代码
import React from '
浏览 3提问于2020-04-21得票数 1
回答已采纳
在下面的代码片段中，我必须将方法'handleChange‘传递给另一个组件'TodoList’。我试过把这个方法捆绑起来，但它没有解决这个问题。
import React from "react";
import TodoList from "./TodoItem";
import "./TodoStyles.css";
import {list} from "./TodoList"
class TodoApp extends React.Component {
constructor(){
浏览 0提问于2021-03-08得票数 0
回答已采纳
1回答
我是个新手，对流星和反应，抱歉，如果这是一个愚蠢的问题。
我试图在我的流星项目中放置一个“反应日期选择器”，但没有成功。
以下是项目结构(与流星官方指南中的todo应用程序相同)
imports
-ui
-App.jsx
-Example.jsx
Example.jsx中的代码(我从Example.jsx中的受控组件示例中复制了这些代码)
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from '
浏览 1提问于2017-07-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
