如何将表单按父组件传递到子组件(附件项的MobileItems)？
在React中，可以通过props将表单数据从父组件传递到子组件。以下是一种常见的方法：
- 在父组件中定义一个状态（state），用于存储表单数据。例如，假设表单数据是一个对象，包含name和email字段：
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
formData: {
name: '',
email: ''
}
};
}
render() {
return (
<div>
<ChildComponent formData={this.state.formData} />
</div>
);
}
}- 在父组件中定义一个方法，用于更新表单数据的状态。将该方法作为props传递给子组件：
class ParentComponent extends React.Component {
// ...
handleFormChange = (event) => {
const { name, value } = event.target;
this.setState(prevState => ({
formData: {
...prevState.formData,
[name]: value
}
}));
}
render() {
return (
<div>
<ChildComponent formData={this.state.formData} onFormChange={this.handleFormChange} />
</div>
);
}
}- 在子组件中接收父组件传递的表单数据和更新方法，并使用它们来处理表单：
class ChildComponent extends React.Component {
render() {
const { formData, onFormChange } = this.props;
return (
<form>
<input type="text" name="name" value={formData.name} onChange={onFormChange} />
<input type="email" name="email" value={formData.email} onChange={onFormChange} />
</form>
);
}
}通过以上步骤，表单数据将从父组件传递到子组件，并且子组件可以通过props获取和更新表单数据。
相关·内容
移动项目是父组件 AccessoryItems是子组件 移动项目有一个反应性的角度形式，我如何将它传递给附件组件的另一个形式。 移动项目html和组件代码为一个组件，附件项目组件也是如此。
浏览 28提问于2020-01-10得票数 0
5回答
我刚开始对JS做出反应，我想创建一个ToDo列表应用程序。我有App.js，它是主页面，所以我为App.js页面创建了MainBlock组件，该组件包含布局的左右两面，在右侧属性中加载具有input和button的Form组件，并将输入值保存到state中的数组中；在左侧，它加载List组件，该组件具有一个名为allTasks的属性，用于打印所有任务。我的问题是如何将allTasks状态从表单组件传递到App.js，从而将其传递给List组件属性？在App.js中：
<MainBlock
left={
<List allTasks={['خرید از فروش
浏览 3提问于2018-02-24得票数 0
回答已采纳
我试图使用回调函数将数据从子组件(拥有表单)传递到父组件，但不能使用父函数中的event.preventDefault()，我的代码如下：
function handleSubmit (event) {
console.log("Done")
event.preventDefault()
}
<LoginForm onFormSubmit={handleSubmit}/>
这是我的子窗体组件：
const [currentUser, setCurrentUser] = useState({
username: "",
浏览 15提问于2020-05-21得票数 1
回答已采纳
我用的是ReactJS和ES2015
我通过道具向下传递一个按钮到一个子组件。
我看不出如何将子数据输入按钮的onClick函数
有人能建议我需要做些什么才能将数据从子组件获取到onCLick函数中吗？
doDeleteItem = (blah) => {
console.log('the item to delete is: ', blah);
};
deleteButton = (
<button
className="btn btn-expand btn-stroke btn-success mr-5&
浏览 9提问于2016-02-10得票数 2
回答已采纳
1回答
大部分答案是针对子代到父代的回调。但我想走得更远。如何将parent回调发送给祖父母？这有可能吗？我是个新手，所以如果我听起来像菜鸟，请考虑一下。提前谢谢。
浏览 1提问于2018-03-30得票数 0
我有通过表单生成器构建表单的组件，现在我需要包含一个只有一个输入框作为表单控件的组件。
add.ts
this.newForm = this.fb.group({
name: ['', [Validators.required]],
surname:['', [Validators.required]],
time: ''
});
“时间”必须作为一个不同的组成部分包括在内。
add.html
<div class="form-group">
<
浏览 0提问于2017-02-20得票数 3
回答已采纳
在我的角度应用程序中，我有一组不同的对话框模型，其中输入了表单数据。一些数据组在许多不同的表单上重复(例如:姓名、电子邮件、地址等的个人信息)。我希望将表单部分分离成一个组件，然后在不同的模式组件中重用它。
标记部分非常简单，但我不知道如何将数据传递给它的父组件。根据表单数据组件将添加到哪个模式组件，提交按钮上会发生不同的事情。
我正在寻找一个教程或某种高层次的解释，我可以如何实现这一点。
浏览 1提问于2017-09-27得票数 0
回答已采纳
3回答
我有主组件文件，并在另一个子组件中使用。我必须得到子组件的状态。
示例:- Home (父)- Form (Child)组件I已将任何文本框的值设置为状态。所以我可以把表单组件的状态值输入到主组件中。
浏览 0提问于2018-05-11得票数 1
回答已采纳
如何在自定义组件的ngOnInit方法中获取其初始设置的FormControl值？
如果您像这样设置表单控件：
testControl = new FormControl("abc123");
然后使用如下属性将其绑定到html中的自定义组件：
<app-custom-component [formControl]="testControl"></app-custom-component>
如何在自定义组件的ngOnInit()方法中访问它的初始值("abc123")？
我已经为我的自定义组件正确设置了ControlVal
浏览 0提问于2018-10-05得票数 0
我有一个显示某些项的Vue.js组件。当按下“编辑”按钮时，会显示内联编辑器。我还使用按名称对项目进行排序。问题是，在每次键传递之后，数组都会立即进行排序，产生一个奇怪的位置更改。排序逻辑在计算方法中。
<div id="app">
<div class="container">
<single-item v-for="item in orderedItems" :item="item" :key="item.id"></single-item>
&
浏览 2提问于2018-07-07得票数 0
回答已采纳
1回答
角2:验证父组件的子组件表单字段
、、、、
问题陈述:
父组件具有<form>标记和其中的一些<input>标记，子组件也有一些<input>标记，父组件有一个<submit>，我们正在验证提交表单上的表单字段。
如何从窗体上的父组件验证子组件<input>字段？
要求:
如果父组件的表单中包含带有input组件的子组件，则这些input组件应该在单击“是否从父组件提交时进行验证”。
发现:
有很多这样的帖子有相同的问题陈述，但没有找到任何合适的solution.All，下面的帖子验证了整个表单，但我的要求是验证子组件中的每个字段。
浏览 4提问于2017-12-26得票数 14
回答已采纳
2回答
这是我第一次在这里发帖，我希望能从你们和其他人那里学到更多！
下面是我练习ReactJS的代码。我正在从Chinnathambi的一本书中学习如何编程。我有一个问题，因为书中没有指定哪个是父组件。
var Army = React.createClass ({
render: function () {
return (
<div>
<p>{this.props.insignia}</p>
<p>{this.props.color}</p>
浏览 0提问于2017-09-21得票数 0
我使用的是react-hook-form库的一个基本示例，即使在查看了纪录片之后，我也不知道如何将数据从表单传递到另一个组件。下面是我的表单组件： import { useForm, SubmitHandler } from "react-hook-form";
type FormInputs = {
minimalFrequency: number;
maximialFrequency: number;
};
// const onSubmit: SubmitHandler<FormInputs> = data => console
浏览 17提问于2021-06-25得票数 0
回答已采纳
我想在单击事件后删除表格的行。我已经创建了迭代并显示了delete按钮，但在我的情况下不知道如何将onClick事件从父组件传递到子组件。我尝试将const row改为component并像往常一样传递onClick，但此方法会破坏我的表。
父组件：
class Home extends Component {
constructor(props) {
super(props);
this.state = { data: []};
}
handleDelete{
alert('here I want to have code to remove row from table&
浏览 3提问于2018-01-02得票数 2
回答已采纳
和VUE.JS一起工作..。
有一个“theParent”组件，有两个孩子：'theForm‘和'theButtons’。(这是对更复杂情景的简化)。
在“theButtons”中有一个“清除”按钮来清除“theForm”表单的字段。
我能把事件从'theButtons‘传递给’家长‘，而不是从'theParent’传递到'theForm‘？
在“theButtons”中：
<b-button v-on:click="clean()">Clear</b-button>
methods: {
clean()
浏览 7提问于2020-12-01得票数 1
回答已采纳
我想要扩展子组件中的数字，并更改父组件的计数状态。如何将子组件中的编号从父组件更改为父组件的计数状态？ 例如，当父组件按下子组件创建的标签为12的按钮时，我希望将父组件的计数状态更新为12。 父组件 class Parent extends Component {
constructor(props) {
super(props);
this.state = {
count: ""
}
}
render() {
return (
<Ch
浏览 12提问于2021-03-30得票数 0
回答已采纳
1回答
我有一个嵌套的反应性表单，我想把它分成几个组件。
高级表格(家长)
advanced.component.ts
我定义了基本表单，但我想避免为父组件中的子组件定义表单模型，因为我认为它们不属于这里。
buildChamberForm() {
return this.formBuilder.group({
_id: [''],
__v: [''],
name: [ '', Validators.required ],
cycle: [ '', Validators.requ
浏览 0提问于2018-10-23得票数 1
如何将数据传递给要在ReactJS中编辑的表单？
我有3个组件，表，表单和父组件。
return (
<Table />
<Form />
);
表呈现一个项列表，每一行都有一个编辑按钮。
因此，当单击Edit按钮时，它将使用项目的id调用一个编辑函数(从使用支持的父程序传递)。
this.props.edit('iAmTheIdOfTheItem');
编辑函数将在父组件状态下设置id。
edit = (id) => {
this.setState({ id })
}
选择的项将传递给窗体组件。
<Form item
浏览 0提问于2019-04-23得票数 1
回答已采纳
1回答
在vue组件之间传递数据
、、、、
我有3个vue组件，组件A使用事件侦听器从用户单击的HTML文本中收集数据，并将其存储到变量中。组件B将获取数据并进行API调用以在表中显示。组件C使用组件A呈现图表，组件C将使用组件B呈现图表下面的表。
构成部分A：
mounted() {
window.addEventListener('node_clicked', (e) => {this.nodeName = e.detail.name})
},
data() {
return {
nodeName: ''
};
问题：
如
浏览 2提问于2022-08-29得票数 1
回答已采纳
1回答
我有一个使用ng-include创建的表单。我试图在ng-include范围之外检索它的状态。在子范围内查看userForm.$valid值的最佳方法是什么？是否可以将userForm.$valid绑定到mainController父作用域中的变量？
问题的简化版本
浏览 0提问于2014-01-11得票数 0
回答已采纳
1回答
我有一个表单，这个表单对于一个组件来说太复杂了。
所以我为表单的一部分做了一个分段，它有多个动态输入，给出一个输出并验证自己。它没有提交按钮，在每次更改时，它只返回计算的结果，如果它被验证成功与否。
// Contains multiple input fields, passes its result when
// filled in properly and errors if not filled in properly
// so I can disable the submit button.
// Also contains a clear m
浏览 1提问于2019-11-29得票数 1
回答已采纳
以下是对象数组的元素：
{
keycode:"X"
id: 'Kick',
url: ''
},
我有一个有状态类组件(App)，它生成音频元素，映射数组并使用函数PlayAudio。这将生成与音频元素相关的按钮，这些按钮在父组件中呈现，父组件将在按下按钮时播放声音。现在，每个对象都有不同的声音、键和id与它们相关联。
我希望在父元素中有一个显示元素来显示与按下的按钮相关联的唯一id。为此，只要按下按钮，就会将相应的id传递给父组件。
如何将按下的密钥的id从子组件发送到父组件？
以下是上的完整代码
浏览 3提问于2022-06-21得票数 0
我正在构造函数(PrepareNodes)中的一些节点对象，以传递到功能组件A(例如)中的响应流，并且我已经定义了一个自定义节点组件(CardNode)无状态，它有一个按钮。按一下按钮，就会触发组件A中定义的函数(PrepareNodes)。
function ComponentA = ({ selectedNodes }) => {
const reactFlowWrapper = useRef(null);
const [elements, setElements] = useState([]);
co
浏览 11提问于2022-07-06得票数 0
回答已采纳
我的页面中有这么多不同组件的表单，只有一个清除按钮(来自父组件)，它基本上只是清除表单的所有输入字段。我一直纠结于如何将子组件的FormGroup传递给父组件，以便从父组件重置这些表单。
浏览 43提问于2020-06-17得票数 0
我需要从子组件中获取数据。我的子组件有以popu表示的表单。如何将全部详细信息传递给父组件。我的父组件ts文件是
import { Component, OnInit } from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';
@Component({
selector: 'app-vehicle-relocate',
templateUrl: './vehicle-relocate.component.html
浏览 2提问于2017-04-27得票数 2
回答已采纳
在React子组件中，我可以访问一个变量options，它返回一个对象数组。
在这个组件中，我有一个函数来检查是否有选项：
const hasOptions = () => options.length > 0;
console.log(hasOptions());
这将返回true或false。
在我的父组件中，我需要这个布尔值来有条件地添加一些样式(基于布尔值)。
如何将此布尔值从我的子组件传递给父组件？
浏览 2提问于2021-08-31得票数 0
回答已采纳
1回答
我正在使用Angular2。我把这个放在我的主组件中：
<form #f="ngForm" novalidate (ngSubmit)="save()">
<child [cosField]="cosField" [f]="f"></child>
<button type="submit" [disabled]="!f.valid">Submit</button>
</form>
我有一个与此组件不同的子组件。子组件中的
浏览 2提问于2016-09-21得票数 1
2回答
我有一个组件，它只包含一个表单和一个提交表单的函数。 submitData(newUserForm: NgForm) 当我单击一个按钮时，如何从另一个组件触发此函数？ 我像这样嵌入表单组件： <app-form></app-form> 但是它不是在主组件中创建的，我不能像子组件一样导入它。 我在主组件中有一个服务，但是表单组件没有访问它的权限。 我已经找到了这个，但似乎没有一个对我有效。 How to call another components function in angular2 在主组件中，我需要一个从表单调用提交函数的函数： 类似于： save() {
浏览 33提问于2021-05-03得票数 0
我有一个有角度的应用程序，我在多个地方都有这个问题，例如：
有一个搜索组件，还有另一个用于搜索的过滤组件，我用ngIf显示/隐藏过滤器组件，在它的ngOnInit()中为过滤器值创建一个formGroup。
问题是，在我使用筛选器并关闭该组件( ngIf更改为false)之后，当我想再次使用它时，我将控制ngIf的值更改为true，而filter组件将生成一个新的空表单。
我想以某种方式将这些值保留在那里，这样我在那里写的东西就会留在那里。
浏览 2提问于2022-01-11得票数 0
回答已采纳
9回答
我有一个表单，并使用v-model绑定输入：
<input type="text" name="name" v-model="form.name">
现在我想提取输入并使其成为自己的组件，然后如何将子组件的值绑定到父对象form.name
浏览 15提问于2017-11-15得票数 121
回答已采纳
2回答
最近，我学会了如何将道具从一个组件传递到另一个组件。在我的例子中，从<FileTree>到<TextBox>，如下所示：
但是之后，我对代码进行了一些重新组织，现在可以在<App> (App.js)中看到React的结构了。我决定把<FileTree>和<TextBox>并排放在一起，带着靴带。
因此，从逻辑上讲，我认为将props从<App>传递给<TextBox>和以前一样:从<FileTree>到<TextBox>。不幸的是，事实并非如此。
目前，这是<App>内部的代
浏览 0提问于2018-04-27得票数 4
回答已采纳
我正在使用父组件的HTML模板中的按钮路由到子组件。如何将父组件的数据(比如名称)传递给子组件？我不想显示URL中的数据(如果传入routerLink就会显示-导航到子组件)
浏览 0提问于2018-10-01得票数 1
我有一个父组件，我想在其中创建和存储我的反应式表单。表单数组中将有多个表单组实例。我想要将表单控件从每个表单组传递到一个子组件，但我弄不清楚如何做到这一点。
这是一个，演示了我想要做的事情。此外，一些字段将只适用于汽车的某些‘制造’，这就是为什么我在我的html中有以下行：
<input type="text" *ngIf="car.make != 'ford'" formControlName="model">
我想将“details”表单组域移动到“details- fields”子组件中，但当我尝试这样做时，它告
浏览 2提问于2018-06-16得票数 15
回答已采纳
2回答
我有一个父组件和一个子组件，其中父组件是使用*ngFor重复的子组件的列表。
每个子对象都通过“角”的@输入特性接收对象，子模板是一个使用角2方式绑定的表单，允许您编辑对象属性。
父类不一定是子组件的通用容器/列表，也不用于其他列表。
父服务器使用注入的服务检索正在使用的数据列表。
我的问题是，应该在保存表单时调用更新函数吗？应该注入服务并调用服务上的更新函数吗？是否应将其传递给要更新的父级？孩子应该从一开始就读吗？
我知道这可能会引发一些固执己见的答案，所以我正在寻找一个答案，这个答案符合角质团队的最佳实践意图，也符合这个标准：
在可读性、性能和设计之间均匀分布。
浏览 5提问于2017-09-12得票数 0
回答已采纳
8回答
我有一个有提交按钮的表单。该表单调用一个函数onclick，该函数将某事的状态从false设置为true。然后，我希望将此状态传递回父状态，以便如果为true，则呈现componentA，但如果为false，则呈现componentB。
我怎么才能做出反应呢？我知道我需要使用状态或道具，但我不知道该如何做。这是否与单向流反应原理相矛盾？？
ComponentA代码：
<form onSubmit={this.handleClick}>
handleClick(event) {
this.setState({ decisionPage: true });
even
浏览 3提问于2016-11-21得票数 75
回答已采纳
3回答
InputField & Button是用于创建表单的自定义组件。我的问题是如何将数据发送回表单，以便在单击按钮时，我可以用数据(用户名和密码)在表单上触发ajax：
export default auth.authApi(
class SignUpViaEmail extends Component{
constructor(props){
super(props);
this.state = {
email : "",
password : ""
};
th
浏览 4提问于2017-01-12得票数 44
回答已采纳
3回答
我需要将枚举从父组件传递到子组件。
我有这个枚举：
export enum Status {
A = 'A',
B = 'B',
C = 'C'
}
这是componenmt：
@Component({
selector: 'app-enum-selection',
templateUrl: './enum-selection.component.html',
styleUrls: ['./enum-selection.component.scss']
})
export c
浏览 2提问于2021-07-09得票数 0
我有一个组件NewForm.js，我从表单中收集数据，我希望这些数据稍后在列表中呈现，我可以在其他地方进行组件钻取，将状态提升到App.js，但这很糟糕，我知道有一种方法可以用useContext和useReducer实现，我知道如何将数据从全局状态向下发送到组件，但我不知道如何“将状态从NewForm.js提升到全局状态”。
浏览 2提问于2022-01-18得票数 0
我有一个有两个子组件的组件。我展示一个或另一个使用路由器与路由器出口。
我想要将表单数据插入到第一个孩子中，并在我提交表单时路由到的另一个孩子中使用它。
我怀疑我需要使用@input或@output，但是在使用路由器出口时，我找不到任何关于如何使用它的文档。
我目前的另一种解决方案是在第一个子节点提交表单并在第二个子节点中调用表单时，将数据保存在本地存储中。似乎不太理想。
浏览 3提问于2016-07-07得票数 1
回答已采纳
1回答
我有一个父组件，它在ngFor中生成一些子组件。
<app-test-child *ngFor="let size of model.sizes; let i = index" [model]="model" [lineNumber]="i">
</app-test-child>
模型包含一个大小数组：
export class TestModel {
constructor(type: string) {
this.type = type;
this.sizes = new Array<numb
浏览 2提问于2021-03-29得票数 1
回答已采纳
我有一个部门组件，我有：
state = {
text: '',
}
render() {
return (
<div>
<SpecialTextBox text={this.state.text}></SpecialTextBox>
</div>
}
我可以在可以访问它的子组件( this.state.text )中访问它，但更改它似乎不会更新父组件中的值。
我正在为子键按下setState，这会更新子程序的this.state，而不是父程序。
我误会什么了？
浏览 1提问于2017-10-07得票数 0
回答已采纳
我刚接触react-native我的组件结构是这样的
MainScreen > LoginScreen > Form > UserInput
> ButtonSubmit
每一个都是一个组件，这就是表单组件
export default class Form extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
&
浏览 0提问于2018-04-06得票数 0
3回答
假设我有一个React类。这不是我正在渲染的主要组件。如何将我在此处设置的状态向上传递给父组件。
class Player extends React.Component {
constructor(props) {
super(props);
this.state = {
playerOneName: ''
}
this.selectPlayerOne = this.selectPlayerOne.bind(this);
}
selectPlayerOne
浏览 8提问于2017-09-29得票数 0
我有一个CartStruct接口，它包含一个类型为CartObj的属性cartObj。CartObj接口包含许多属性。其中之一就是cartNumber。
这是接口的模型。
const interface CartStruct {
cartObj: CartObj
pos: number
}
const interface CartObj {
...
cartNumber: number
...
}
在表单中，用户可以输入多个CartStructs的数据，因此我创建了一个存储CartStruct数组的useState。
const [cart, setCart] = use
浏览 4提问于2022-05-05得票数 0
回答已采纳
我希望传递布尔状态以将className从一个组件更改为另一个组件。我试图通过{this.props.isOpen}传递它，但是它没有工作。如何将状态值传递给另一个组件？
父组件
class Category extends React.Component {
constructor(props) {
super(props);
this.state={ isOpen: false };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ is
浏览 5提问于2017-09-11得票数 1
回答已采纳
1回答
我是react-native的新手，但我一直在尝试创建一个简单的登录UI。我有一个登录组件，然后是两个独立的表单组件，用于loginForm和forgotPasswordForm。
在我的Login组件上，我有一个renderForm函数，它试图确定我们应该显示loginForm还是forgotPasswordForm，我认为这是基于state的。
登录组件：
export default class Login extends Component {
state = { 'display': '' };
// Render the content
浏览 2提问于2017-01-13得票数 2
回答已采纳
我对备忘录和回调挂钩有疑问。
如果函数和数据属性都从父组件传递到子组件。如何使用纯组件优化类型。
浏览 8提问于2021-05-31得票数 0
我有一个子组件，它通过事件释放数据，发出的数据与父emitter.The中的ngModel绑定。其中的发射方法是从父组件调用的。我创建了子组件，因为我有两个相同的表单。因此，我创建了一个单一的表单组件，并使用它两次，并与他们的数据绑定。
//Child Component Code
import {Component, EventEmitter, Input, Output} from 'angular2/core'
@Component({
selector: 'child-component',
template: `
<input
浏览 6提问于2017-09-09得票数 0
回答已采纳
我在从API获取从子节点到父节点的数据时遇到了一个问题
孩子：
class Carton extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
matchData: []
};
}
在这里，我从API获取数据并更新状态
async componentDidMount() {
setTimeout(() => {
this.loading = true;
fetch(url)
.then(res => res.json()
浏览 2提问于2019-11-18得票数 0
如何将ChildComponent中的hello值传递给App组件，并在页面加载时将其存储在ChildComponent的childProps变量中。
import React, { Component } from 'react';
class App extends Component {
render() {
var childProps ''; // I want store the passed const value in this variable;
return (
<div>
<Ch
浏览 8提问于2022-01-28得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
