当你将道具传递给子组件时，如何在onChange中设置状态？
在React中，当你将道具传递给子组件时，可以通过在子组件中定义一个onChange事件处理函数，并在该函数中调用父组件传递的onChange函数来设置状态。
具体步骤如下：
- 在父组件中定义一个状态和一个onChange函数，并将它们作为道具传递给子组件。例如：
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
}
handleChange = (newValue) => {
this.setState({ value: newValue });
}
render() {
return (
<ChildComponent value={this.state.value} onChange={this.handleChange} />
);
}
}- 在子组件中接收父组件传递的道具，并在需要的地方调用onChange函数来设置状态。例如：
class ChildComponent extends React.Component {
handleInputChange = (event) => {
const newValue = event.target.value;
this.props.onChange(newValue);
}
render() {
return (
<input type="text" value={this.props.value} onChange={this.handleInputChange} />
);
}
}在上述代码中，子组件中的输入框的值由父组件传递的value状态控制，并且在输入框的onChange事件中调用了父组件传递的onChange函数来设置父组件的状态。
这样，当子组件中的输入框的值发生变化时，会触发onChange事件，从而调用父组件的handleChange函数来更新父组件的状态。
这种方式可以实现父子组件之间的状态传递和同步更新，使得子组件能够通过调用父组件传递的onChange函数来修改父组件的状态。
相关·内容
我有两个组件：ParentComponent和ChildComponent。
ChildComponent有一个input[type="text"]元素，当它更改文本时，该事件通过事件change和onChange侦听器传播到ParentComponent。
下面的代码是一个更大问题的简化，这就是为什么您会在这里看到一些突出显示的需求。
，我的问题是，我需要在函数handleClick中触发change事件。我做了一些没有运气的实验。
这里有您可以试验的代码沙箱(请用您的方法提供一个分叉)：
这里有代码：
ParentComponent.js
import React fro
浏览 0提问于2018-12-28得票数 3
回答已采纳
我有三个子组件，每个组件中都有表单，还有一个父组件，我想将所有这三个子组件表单注入到我的父组件中，并执行一个submit.My目标是以json格式显示所有三个表单数据。孩子1：
import React, { Component } from 'react';
import { PropTypes } from 'react'
class Input extends Component {
constructor(props){
super(props);
this.state = {
id: '',
浏览 0提问于2021-03-05得票数 0
我需要用子绑定父对象的泛型对象的字段，并让该子对象更新它。
ParentComponent应该以item的email字段作为它的值来呈现ChildComponent，然后子组件应该能够在父端更新这个值。
item和ChildComponent可以用于任何类型的对象，因此它们将被动态加载。
这是
父组件
interface State<Type> {
item: Type;
}
export default class ParentComponent<Type> extends React.Component<
{},
State<Type>
浏览 0提问于2019-11-20得票数 0
当我提交联系人表单时，它会显示错误，如发送消息时出错。请帮助我，我的代码中有什么错误吗？我是react js的新手。这是我用过的代码。请告诉我这里面有没有逻辑或语法错误。
import React, { FormEvent, ReactElement } from 'react';
import { noop } from 'rxjs';
import { EmailData } from '../../../models/i-email-data';
import { EmailInput, MessageInput, NameInput, S
浏览 7提问于2020-06-08得票数 1
回答已采纳
1回答
我正在编写我的第一个组件，我在数据绑定方面遇到了问题
我想要的是在我的LoginView中获取字段的值，这样我就可以在handleSubmit中将它们进一步传递到一个函数中，该函数向后端发出请求。
我以前写过这个没有组件的表单，但是后来我决定通过将每个表单分割成小组件来改进它。
问题是，我不明白LoginView和TextInput之间的数据传递是如何工作的。
TextInput组件
import React, {PropTypes} from 'react'
import classNames from 'classnames/bind';
class Te
浏览 0提问于2016-03-11得票数 0
我正在用React做一个核对表。下面是我的Parent组件：
<ul>
{this.props.data.map(item => {
return(
<div><Child {...item} onChange={(e) => this.handleChange("Hello", e)}/></div>);
})}
</ul>
调用打印列表元素的Child组件：
<li>
<input
type="checkbox"
浏览 2提问于2017-11-19得票数 0
回答已采纳
2回答
我有一个包含行的表，行中的每个单元格都可以编辑。与每一行关联的按钮将将该行中的所有单元格提交给数据库。我想知道的是，如果单元格中的数据已经更改，我如何从提交事件实际发生的组件中访问新值？
下面是我目前正在制作桌子的方法：
主表：
import React from 'react';
import TableWithDataHeader from './TableWithDataHeader.jsx';
import Row from './Row.jsx';
import AppStore from '../../stores/AppSt
浏览 4提问于2016-03-18得票数 1
回答已采纳
当涉及到简单的验证逻辑时，我不确定我是否理解如何组织我的第一个React JS应用程序。我的想法是将尽可能多的逻辑放到每个子组件中，但在我看来，当使用时，更符合逻辑的地方是父组件。但在我看来，这似乎是错误的，因为父母可能会为所有的孩子编写大量的代码。我已经提供了一个非常简单的例子来说明这个问题。
在我的示例代码中，有一个用于输入框的小型子组件，一个中间的组件包含两个这样的输入框(我们称它为用户名控件)，然后顶部的组件是一个编辑页面。每个组件都有自己版本的isValid。最低的子级验证输入在有效之前是否为空。中间的组件验证两个输入框都有内容。顶部的父编辑页面与中间的组件执行相同的操作。我的问题是
浏览 0提问于2020-05-07得票数 0
我正在使用一个简单的HTML下拉列表并使用react控制它(==>控制组件)。目前一切都很好。问题是，select选项每隔几秒钟通过异步ajax调用更新一次，开始时为空。选择数据列表通过道具传播。
因此，select数据列表更改，所选选项列表更改-但不触发更改(afaik的设计反应)。我已经找到了一种工作方式，通过听"componentDidUpdate“和”手动“读取select作为引用的值来侦听这些更改，但这似乎非常"un”(下面的代码)。有人知道做这件事的“反应”方式吗？
完整代码：
class Dropdown extends React.Component {
浏览 0提问于2018-06-25得票数 0
回答已采纳
2回答
我有一张表格看起来像：
底部是表单状态的相关部分，即强制转换为JSON，它位于此组件中。
当您单击“添加另一个”时，它会添加另一对字段。这些字段对是子组件CountryFieldRow。
在子组件中，在编辑字段时，将正确更新子字段的状态。
如何在父对象中更新状态，以便更新打印出来的JSON？
编辑，代码添加：
import React, { Component } from 'react';
import CountryFormRow from "./CountryFormRow"
class CountryForm extends React.Co
浏览 1提问于2019-02-22得票数 0
回答已采纳
2回答
反应-通过状态下降
、、、
我正在建立一个简历创建者的反应。我有一个表单，一个预览组件，它们最接近的父组件是主组件。我想要实现的是，当用户在表单字段中输入时，右边的预览字段会自动更新表单中的数据，但我无法让它正常工作。这是我在React中的第一个项目，我不能使用钩子或功能组件。我知道我做错了什么，但找不到什么。
主要部件
import React, { Component } from "react";
import Form from "./form/Form";
import Preview from "./formpreview/Preview";
class Ma
浏览 3提问于2021-05-26得票数 1
回答已采纳
2回答
我在Codeacademy上了React.JS课程。这个问题来自React.JS第二部分。我正在学习编程模式，但我不能理解这个模式是如何工作的
代码：
Parent.js
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');
var Parent = React.createClass({
getInitialState: function () {
return { name: '
浏览 7提问于2017-06-14得票数 1
1回答
这是我的组件-结构: ExchangeRateInput ExhangeRateValueInput ExhangeRateDialog
打开的状态作为支柱传递给ExhangeRateDialog。但是当我在setState中打开ExchangeRateInput时，它似乎在ExhangeRateDialog中没有变化。有人能解释一下我做错了什么吗。
ExchangeRateInput
import { composeWithTracker, composeAll } from 'react-komposer';
import React from 'react'
浏览 2提问于2016-10-21得票数 0
回答已采纳
2回答
我有父组件，在其中设置状态、调用子组件、从子组件获取值并将其再次发送给父组件并设置值。
class Parent extends Component {
constructor(props) {
super(props);
this.onInputChange = this.onInputChange.bind(this);
this.state = {
value: ""
};
}
emailList = [
{
labe
浏览 1提问于2018-05-14得票数 0
回答已采纳
我是新的反应和掌握它，我正在转换现有的项目从jQuery的反应。
我有六个选择框，根据上一个选择框的选择顺序更新，例如，从select box A中选择选项select box A，select box B必须用与FOO相对应的项进行更新。
我会在下面列出一些参考资料
到目前为止的情况：，我得到了使用fetch调用api的onchange事件，并获得了我想用来填充下一个选择框的数据，这就是我碰到的地方。
我编写了两个组件MapControls和SelectBox。MapControls有一个处于其状态的对象数组，用于生成SelectBox实例的集合。
下面是MapControls组件：
cla
浏览 1提问于2018-11-02得票数 0
回答已采纳
1回答
我试图为以下情况创建一个SPA :学校-Student1 -Student2 -Student3 -name -Address -房屋号码，街道，城市，州，国家。
如果我考虑，学校，学生，称呼作为反应的组成部分。学校:持有/显示学生名单，可以添加，删除。学生:持有/显示信息，如姓名，地址，可以修改。地址:保存/显示可以修改的地址详细信息。
现在，我在这里怎么做国家管理，比如说如果用户修改了其中一个学生的地址，这在学校里怎么能反映出来。
我可以想到的选项: 1.使用Redux，但如果我想创建这个学校作为组件，将在另一个反应应用程序中使用，我是否能够使用组件级的redux存储。
将“学生对象”
浏览 0提问于2019-02-11得票数 0
我正在尝试遵循处理多个输入的示例：
我尝试添加两个表单元素: firstName和lastName。一个是在主render()函数中呈现的，而另一个是使用单独的名为LastName()的JSX函数创建的。
结果可以在这里获得：
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2,
firstName: 'John',
浏览 1提问于2017-04-19得票数 4
我对Js的反应是刚刚开始的，我对下面的场景非常困惑。在我的父组件中有一个名为availableShops的数组，我只是使用setState在子组件中更新它。我也希望在我的子组件中保留setState方法。
父级：
import React, { Component } from 'react';
import Child from './shop-with-price';
export default class Parent extends Component {
constructor(props) {
super(props);
浏览 2提问于2019-09-14得票数 0
当另一个组件的状态发生变化时，我正在尝试更新该组件的状态。
下面是包含表单的主要组件：
class IpsumForm extends React.Component {
state = {
character: 'All',
paragraphs: 1,
ipsumDisplayed: false
};
handleInputChange = (e) => {
const target = e.target;
this.setState({ paragraphs: target.value });
};
h
浏览 0提问于2018-06-19得票数 1
我想有一个单选按钮的列表，其中一个选项是一个自由的‘其他’文本框，让用户输入自己的文本。
这里我有一个工作沙箱，里面有我想要做的一切：
handleChange = event => {
this.setState({
value: event.target.value
});
};
selectItem = item => {
this.setState({
selectedItem: item
});
};
handleOtherChange = event => {
this.setS
浏览 1提问于2018-10-08得票数 8
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
