React组件之间的双向绑定
基础概念
React 是一个用于构建用户界面的 JavaScript 库，它采用单向数据流的设计理念。然而，有时我们需要在组件之间实现双向绑定，即一个组件的状态变化会自动反映到另一个组件中，反之亦然。
相关优势
双向绑定可以简化数据流的管理，使得组件之间的数据同步更加直观和高效。它减少了手动处理数据传递和状态更新的复杂性，提高了开发效率。
类型
在 React 中，双向绑定通常通过以下几种方式实现：
- 受控组件（Controlled Components）：通过将组件的值（如输入框的值）存储在组件的状态中，并通过事件处理程序更新状态，从而实现双向绑定。
- 非受控组件（Uncontrolled Components）：使用
ref来直接访问 DOM 元素，从而实现双向绑定。 - Context API：通过 Context 提供了一种在组件树中共享数据的方式，可以用于实现跨组件的双向绑定。
- 状态管理库（如 Redux、MobX）：这些库提供了更高级的状态管理功能，可以用于实现复杂的应用程序中的双向绑定。
应用场景
双向绑定在以下场景中非常有用：
- 表单输入：用户输入的数据需要实时反映到组件的状态中。
- 实时数据同步：多个组件需要共享和同步数据。
- 动态表单：表单字段之间的依赖关系需要实时更新。
遇到的问题及解决方法
问题：为什么在 React 中不推荐使用双向绑定？
原因：React 的设计理念是单向数据流，这使得数据流更加可预测和易于调试。双向绑定会破坏这种单向数据流，导致数据流难以追踪和管理。
解决方法：
- 使用受控组件：
import React, { useState } from 'react';
function InputComponent() {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
return (
<input type="text" value={value} onChange={handleChange} />
);
}- 使用 Context API：
import React, { createContext, useContext, useState } from 'react';
const MyContext = createContext();
function ParentComponent() {
const [value, setValue] = useState('');
return (
<MyContext.Provider value={{ value, setValue }}>
<ChildComponent />
</MyContext.Provider>
);
}
function ChildComponent() {
const { value, setValue } = useContext(MyContext);
return (
<input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
);
}- 使用状态管理库：
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updateValue } from './store/actions';
function InputComponent() {
const value = useSelector(state => state.value);
const dispatch = useDispatch();
const handleChange = (event) => {
dispatch(updateValue(event.target.value));
};
return (
<input type="text" value={value} onChange={handleChange} />
);
}参考链接
通过以上方法，可以在 React 中实现类似双向绑定的效果，同时保持单向数据流的优势。
相关·内容
2回答
使用ngReact，如何优雅地建立双向数据绑定？
假设我有一个简单的React输入组件，它接受value并触发onChange
angular.module('app', []).value('SimpleInput', props =>
<input type='text'
value={props.value}
onChange{e => props.onChange(e.target.value)} />
)
然后，从AngularJS方面来看，我希望这样的东西能够在范围内
浏览 5提问于2015-07-09得票数 13
2回答
是否有任何方式将状态从父组件传递到子组件，如：
var ParentComponent = React.createClass({
getInitialState: function() {
return {
minPrice: 0
}
},
render: function() {
return (
<div onClick={this.doSomething.bind(this, 5)}></div>
);
}
});
var ChildComponent = React.createClas
浏览 12提问于2014-10-23得票数 9
回答已采纳
2回答
我有一个导航工具栏，其中包含H1。我还为每个页面提供各种子内容，作为子组件。如何将标题信息从子页组件传递到父导航？
我尝试使用上下文，但它只从父级传播到子类。
她是一个简化的例子：
const App = React.createClass({
render() {
return (
<div>
<toolbar>
<h1>{myTitleAccordingToPage}</h1>
</toolbar>
<main>
浏览 0提问于2016-02-09得票数 0
回答已采纳
3回答
我在想，我需要利用AngularTS组件中的子组件中的输出注释来更改父属性，但我认为我可以这样做：[(item)]="myItem"和它将正确绑定。
我查看了输出和EventEmitters，但是这创建了新的变量，这些变量仅用于执行以下函数：
@Output() clicked = new EventEmitter<number>();
然后你会把它称为：
(clicked)="myFunc(id)"
考虑到我的用例，我认为不需要输出，因为我没有执行父函数等中定义的函数，只是想更新属性，在本例中是myItem。
对于如何绑定以及是否应该使用输出注释，
浏览 0提问于2018-09-17得票数 1
回答已采纳
这是我目前正在读的一些反应教程中的一篇：
国家驱动Facebook上的人所谓的单向反应性数据流，这意味着我们的用户界面将对状态的每一个变化做出反应。
和
通常UI有很多状态，这使得管理状态变得困难。通过每次发生状态更改时重新呈现虚拟DOM，React使您更容易思考应用程序所处的状态。这个过程如下所示，信号通知我们的应用程序一些数据已经改变了--重新呈现虚拟DOM -> - Diff以前的虚拟DOM，而新的虚拟DOM ->只需用必要的更改来更新真实的DOM。
第一个引用似乎表明数据流从对UI的反应。但是第二个引用似乎表明，它从DOM到React，然后重新呈现虚拟DOM
浏览 4提问于2015-09-22得票数 16
回答已采纳
我知道我们用
用于检测类似事件的()
<div (click)="doSomething()">
或
<div (blur)="doSomethingElse()">
以及用于将模板中的变量转换为字符串的{{}}，如
<div>{{a_variable_i_want_to_show}}</div>
但是除了在ng-model中进行双向绑定之外，我们还能用[()]做什么呢？
有没有通用的用法？
浏览 0提问于2016-04-08得票数 0
根据我所读到的- React将所有的DOM更改一起推送。angular不能做同样的事情吗？在摘要循环之后，它知道要更改哪个DOM节点-为什么不一起发布它呢？
浏览 0提问于2016-12-18得票数 0
我有一个组件<my-comp>，它有一个带有双重绑定的属性，我将其传递给另一个组件<my-sec-comp show-drawer="{{showDrawer}}">。当我在父元素中更改属性showDrawer时，在子元素中也会注意到这一点。但不是反过来。我如何才能做到这一点？
子元素中的声明为：
showDrawer : {
type: Boolean,
notify: true
}
父元素中的声明为：
showDrawer : {
浏览 0提问于2017-06-30得票数 1
我对这些概念有点模糊，如果我完全用AngularJS和React‘s构建相同的ToDo应用程序-是什么让React ToDo使用单向数据绑定而不是AngularJS的双向数据绑定？
我知道React的工作原理是
Render(data) -> UI.
这与Angular有什么不同？
浏览 30提问于2015-12-30得票数 131
回答已采纳
2回答
我有一个简单的卡片组件，我从资料-ui的网站复制。
我正试图在我的代码中实现这一点。当我单击CardHeader时，它不会展开。
这是我的组成部分：
import React, { Component } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {Card, CardActions, CardH
浏览 3提问于2016-05-18得票数 1
回答已采纳
下面是一个模板示例：
<input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">
<input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">
在这里，他们两个都在做同
浏览 6提问于2017-02-28得票数 114
回答已采纳
我只是想知道这是否可能，让我们假设我这里有这样的代码：
<div v-for="tile in container" v-bind:class="proper-class">
<tile :tile='tile' @update="update-class"></tile>
</div>
当组件中的变量发生变化时，我希望更改父div的css类。
我知道我们应该使用$emit，但是这里有一个v-for，所以我们正在创建多个组件，$emit callback将更新proper-c
浏览 0提问于2018-05-05得票数 2
回答已采纳
我需要创建一个网站，这将被转换为一个移动应用程序(我想要建立更适合作为一个网站，而不是一个应用程序，所以建筑本身应该是一个网站)。
因为我更熟悉桌面和Android原生开发环境，所以我对web客户端开发知之甚少。在阅读了一些内容之后，我决定在客户端使用这些技术: HTML5、CSS3、Bootstrap、React.js
问题是，我读到Angular实际上是一个完整的MVC框架，而React有一些更具体的角色，这就像是将汽车(Angular)与引擎(React)进行比较。我已经看到了一些关于如何使用hello world和事件处理等技术来做一些动作的比较，所以我不需要知道如何具体地做一些事情，
浏览 0提问于2016-01-04得票数 10
面向聚合物用户的问题：
如果元素不是父-子或子-父相关的，如何获取属性值？据我所知，连锁式的监听程序是一个非常糟糕的主意。是否可以指定具体元素来侦听事件？
我知道它可以通过JS的方式完成：
document.addEventListener('event', handle('elem'));
但我需要聚合物的方式。
谢谢。
浏览 0提问于2017-10-31得票数 1
我相信这是因为它将值绑定回属性inputText，但只是想确保我声明的是正确的。 import React, { useState } from "react";
const InputElement = () => {
const [inputText, setInputText] = useState("");
return (
<div>
<input
placeholder="Enter Some Text"
onChange={e => {
浏览 21提问于2019-03-08得票数 0
我有一个名为Earth的子组件，如下所示。
<h3>Earth's speed is @Speed unit.</h3>
@code {
[Parameter] public double Speed { get; set; }
[Parameter] public EventCallback<double> SpeedChanged { get; set; }
}
名为God的父组件按以下方式使用Earth。
@page "/God"
<Earth @bind-Speed="speed" S
浏览 2提问于2020-07-21得票数 0
回答已采纳
3回答
我刚刚开始学习Angular2，我想知道为什么开发人员决定在html中使用各种不同的包装器？例如：
[(ngModel)]="some.property"
(click)="someMethod()"
[src]="some.property"
我确信这背后有一个很好的逻辑原因，而且我知道它们被用于不同的目的，但乍一看，这似乎不一致，而且是一个不必要的障碍。
浏览 9提问于2016-12-05得票数 5
回答已采纳
我们公司正在创建一个内部的web开发框架。我们正在Vue之上创建一个组件库。稍后还会支持其他一些web开发框架，比如React。我们通过将简单的表单控件封装在我们自己的Vue组件中并像这样在模板中使用它们来做到这一点：
<our-input v-model="customerModel" />
我们想要做的是，将"v-model“属性名称重命名为其他名称，以进一步抽象出对Vue的任何引用，以便我们可以轻松切换到另一个框架。
除了搜索和替换之外，还有其他的想法吗？
浏览 1提问于2017-10-12得票数 6
对象是父组件的属性
const public object = {value1: 'test1'};
并且它用作子组件的属性
<app-child [(obj)]="object"></app-child>
子组件本身还有其他子组件，这些子组件将value1字段作为属性
<app-child-2 [(value)]="obj.value1"></app-child-2>
问题是，我是否可以对第二个子节点使用[(value)]，或者设置从父节点到第二个子节点的双向绑定的唯一方法是不能
<app-
浏览 0提问于2017-04-17得票数 1
我有一个复选框，如果复选框被选中，我需要在加载时显示警报消息application.But问题是复选框在标题组件中，当我将在主页中时，它与主页component.So链接，如果复选框被选中，我需要在加载应用程序时显示警报消息。这是下面的代码，
header.component.html
<div><input checked type="checkbox">Other-component</div>
header.component.ts
import { Component, OnInit } from '@angular/core
浏览 1提问于2019-11-10得票数 0
我是ReactJS的新手。我发现props和state在react中用于绑定。
角度范围和ReactJS状态的核心差别是什么？
浏览 0提问于2018-03-25得票数 2
这个问题更多的是最佳实践，而不是与代码相关的问题，但我已经在网上搜索了一段时间，但没有多少进展。
我们有一个现有的AngularJs (1.x)应用程序，我们正试图在其中添加简单的React组件。添加React不是问题所在。我想知道将Redux添加到其中是否也有意义？我知道Redux是一个应用程序级别的状态组件，但由于我们只在部分中添加React，在这种情况下使用Redux会不会是一种不必要的夸大其词？我提到Redux只是假设React组件的复杂性和数量在未来可能会增长。如果我们只需要添加几个简单的React组件，我就不会考虑Redux。
这是一个将React添加到Angular应用程序的，但
浏览 0提问于2017-08-23得票数 0
我试图将值放入<input value="{{ val }}">，但我认为这样做是错误的，因为它返回空数据。
如何为输入设置默认值？
我已经创建了用于更新的API。我只需要返回输入数据即可。
谢谢
浏览 0提问于2017-09-08得票数 11
我听说react中的双向绑定是不自由的。由此我明白了，如果我们添加一个输入字段并在其中键入一些文本，它应该不会反映按下的键。但是有钩子(App1.js)或没有钩子(App2.js)的输入字段的行为是相同的，它反映了键入的文本。谁能告诉我以下代码( App1.js，App2.js)之间的区别。
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' co
浏览 15提问于2019-07-25得票数 1
回答已采纳
版本："angular2"："2.0.0-beta.6“
我想在父/子组件案例中实现双向绑定。
在我的子组件上，我使用双向绑定在编辑时显示文本。
子组件(InputTestComponent [selector:'input-test'])：
<form (ngSubmit)="onSubmit()" #testform="ngForm">
{{name}}
<textarea #textarea [(ngModel)]="name" ngControl="name
浏览 16提问于2016-02-25得票数 32
回答已采纳
3回答
React的概念是unidirectional data flow，与其他框架(如Vue.js )中的two-way data binding不同。
我做了下面的片段来感知本质的区别，然后unidirectional似乎要求应用程序传播任何状态转换，而two-way通常是为您做的。
希望我可能弄错了这里的要点，那么你能帮我澄清两人之间有什么更根本的分歧吗？
var MyComponent = React.createClass({
getInitialState: function () {
return {
one: 'Hello',
浏览 6提问于2016-08-15得票数 4
回答已采纳
1回答
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>
@code {
[Parameter]
public string IncrementAmount
{
set
{
currentCount = Convert.ToInt32(value);
浏览 2提问于2020-01-18得票数 1
回答已采纳
你好，在angularJS中将双向数据绑定转换为单向的正确方法是什么？
我有组件
import template from './test.component.html';
import controller from './test.controller';
export const DateWrapperComponent = {
bindings: {
test: '='
},
template,
controller
};
控制器
export default function TestController($s
浏览 0提问于2018-07-13得票数 2
4回答
我一直在尝试了解Vue的v-model如何与自定义输入和常规输入组件一起工作。
我见过v-model绑定到组件和模板中的值的示例，这两个值将是不同的。我对此感到非常困惑，我认为这可能是对“双向绑定”的误解。如何将输入绑定到两个值。
示例：
//v-模板中的model
const myCustomInput = ('my-custom-input', {
data() {
return {
myObj: 'hello'
}
},
template: `<input v-model="myObj" >
浏览 2提问于2019-09-16得票数 1
2回答
我注意到在我的角度应用中
[(ngModel)]="this.properties.offerValue"和[(ngModel)]="properties.offerValue"
他们两人的工作似乎是一样的，我的好奇心提出了一个问题，有什么区别，哪一个是正确的用法。
浏览 0提问于2018-08-21得票数 3
回答已采纳
我有一个引导表。就在桌子前面，我有一个按钮和一个文本框。在文本框中输入任意数字并单击generate按钮后，我想用文本框值更新每一行的"Bill Amount“列。我该怎么做呢？ <div>
Amount : <input type="number" class="form-control" id="amount" name="amount" placeholder="Amount">
<button type="button" class="btn
浏览 20提问于2021-03-28得票数 0
回答已采纳
2回答
我在网上到处找，都找不到答案。我想知道，在将Angular元素的输入转换为脚本并转换为普通的HTML/JavaScript文件后，是否可以对其进行数据绑定。我在一个Angular环境中测试了数据绑定一个Angular元素，它工作得很好。只有当我将它作为脚本带到普通的HTML/JavaScript中时，它才会停止工作。有没有可能做到这一点，如果是的话，有人能给我举个例子吗？ 我们有一个名为my-element的角度元素，我希望将一个布尔值数据绑定到它的输入。 public _random: boolean = false;
@Input()
get random(): boolean {
浏览 16提问于2021-08-18得票数 0
1回答
我在一个组件中导入了两个相同的子组件，并使用$emit()和$on从子组件中获得结果。现在，我希望将返回的值绑定到每个组件。
例如，如果我将dimensionA中的星星单击为2，则dimensionA :: {{dimensionA}}应该显示dimensionA :: 2，与dimensionB一样。有什么帮助吗？
这是
浏览 2提问于2016-12-30得票数 1
回答已采纳
我有一个画廊组件，显示来自组件道具的图像。
图片库组件一次显示一个图像，但为了动画目的，从数组中随机加载了2个图像。
一切听起来都很棒，但我在控制台上看到了这个错误
Uncaught TypeError: Cannot read property 'currentIndex' of null
不知道为什么这会是空的。
下面是ViewGallery.js组件：
import React from 'react';
class ViewGallery extends React.Component {
getInitialState(){
ret
浏览 1提问于2016-04-12得票数 0
回答已采纳
3回答
我正在创建一个连接到Android上的XMPP服务器的应用程序。我想保持连接，直到用户注销。
我应该使用常规服务还是绑定服务来保持连接？
欢迎任何提示、建议和有用的信息。
浏览 0提问于2012-02-14得票数 13
我正尝试在我的Angular 2应用程序中包含一个为react编写的库，但是无论我怎么尝试，ReactDOM似乎都没有定义为输入脚本，即使变量在chrome的javascript检查器中有内容。(和)
为了隔离这个问题，我已经查看了将两者结合起来的其他尝试，但只找到了Angular 2 Beta和React版本< 1.0.0的解决方案-所以我采用了其中一个，(github.com/LookLikeAPro/Angular-2-React-Example)，更新了包并修改了代码，最后遇到了同样的错误。
我的分支可以在这里找到:启动它的github.com/aJonathanSchneide
浏览 0提问于2017-09-05得票数 2
1回答
如何让独立组件知道组件中的更改或事件？
例：
<#user-social profile>
{{partial 'user-handle'}}
<div class='subtext'>
{{#reply-component}} {{/reply-component}}
</div>
<div class='replybox hide'>
<textarea></textarea>
<input type='but
浏览 1提问于2015-01-24得票数 0
回答已采纳
2回答
import React, { useState } from "react";
function App() {
const [name, setName] = useState("");
const [headingText, setHeadingText] = useState("");
function handleChange(event) {
// console.log(event.target.value);
setName(event.target.value);
}
function
浏览 15提问于2021-05-22得票数 0
1回答
不确定为什么addUser()中的setState函数不能完成它的工作。POST请求运行良好，但输入不清楚，这对用户来说是个问题。也许另一双眼睛，可以发现瑕疵。
import React, { Component, PropTypes } from 'react';
import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
import { Link } from 'react-router';
// Import Style
import styles from
浏览 1提问于2017-01-31得票数 1
回答已采纳
我想知道如何从组件内部动态地编辑组件属性。代码可能会帮助您更清楚地了解我想要做的事情。
模板/板.
<div>
{{board-component title='Title that wants to be dynamic'}}
</div>
元件/板-组件
{{#if isEditing}}
<div>
<input type="text" value={{title}}>
</div>
{{else}}
<div>
{{title}}
<
浏览 2提问于2016-08-04得票数 1
回答已采纳
我有点困惑，一些教程使用#来获取输入，而另一些则使用[(ngModel)]。两者之间的有效区别是什么？
浏览 1提问于2017-04-05得票数 18
回答已采纳
我在HTML中使用*ngFor循环一些对象，在div中，我想调用一个具有参数的函数，在这个参数中，我还想发送一些数据。
<div *ngFor="let user of users">
<div [(ngModel)]="`calDuration`(user.dateCreated)">
</div>
组件类
calDuration(value){
......logic here......
}
但我有个错误：
解析器错误: calDuration(user.dateCreated)=$event中列30处的意外令
浏览 0提问于2018-12-11得票数 1
我正在构建一个带有角4& Ionic 3的应用程序，我还在与组件做斗争：
我制作了一个组件MesuresPreventionsComponent (请原谅我的法语:p)，这个组件需要来自他的父组件( Ionic Page)的列表，但我也希望它能够更新父组件中的列表。
因此，我了解了@Input和@Output，并认为我应该使用EventEmitter来检测更改，并从父目录中更新列表。
我读过这个并想出了怎么做。
所以我就是这么做的：
@Output() targetChange: EventEmitter<Array<any>> = new EventEmitt
浏览 0提问于2018-06-07得票数 0
回答已采纳
6回答
Angular 1.x (AngularJS)或多或少遵循了MV*的设计原则，因为它具有双向数据绑定功能。
Angular2正在采用基于组件的UI，这是React开发人员可能很熟悉的一个概念。在某种意义上，Angular 1.x控制器和指令模糊成了新的Angular 2组件。
这意味着在Angular 2中没有控制器，也没有指令。相反，组件有一个选择器和一个@View，选择器对应于组件将表示的html标记，@View指定要填充的组件的HTML模板。
Angular2仍然实现双向数据绑定，但不包含模型，例如，如果我有一个显示文章列表的@Component和一个定义文章对象的class：
clas
浏览 0提问于2016-04-30得票数 78
由于我试图使用模板驱动的方法在角10离子访问模型，这会给页面加载带来错误。
现在，我已经在HTML页面中使用了这种方法。
<form (ngSubmit)="onBookPlace()" #f="ngForm">
<ion-grid>
<ion-row>
<ion-col size-sm="6" offset-sm="3">
<ion-item>
<ion-label position="
浏览 6提问于2020-10-09得票数 1
1回答
React的网站声明：
在MVC中，很多人使用的都是V。
由此，我推断，在MVC中，React并不扮演"M“和"C”的角色。
如果这是正确的，这意味着一个人不能建立一个完整的web应用程序的反应JS。
那怎么做？
Rails或Laravel等后端是否需要完整的MVC框架？
可以简单地从后端提取数据，框架(如Rails或Laravel )将被设置为web吗？
是否不需要这样的反应，并以一种完全不同的方式工作(换句话说:我是否完全错过了重点)？
浏览 1提问于2015-06-27得票数 1
回答已采纳
我对meteor / react编程非常陌生，对javascript不太熟悉，所以请原谅我的无知。
我正在阅读流星教程，并试图理解以下内容：
<input
type='checkbox'
readOnly={true}
checked={this.state.hideCompleted}
onClick={this.toggleHideCompleted} />
具体来说，我正在努力理解readonly={true}做什么以及为什么需要这样做。
此外，我尝试谷歌，并发现这个页面看起来像文档，但它甚至没有提到这一点。
任何帮助都很感激
浏览 4提问于2016-03-19得票数 0
回答已采纳
1回答
我对这些东西很陌生，我在想，我正在用Ionic开发一个应用程序，我现在使用的o角是4。假设我想使用角1，我怎么能做到呢？谢谢
浏览 2提问于2017-05-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
