ReactJS 数据绑定

数据绑定是将视图元素或用户界面与填充它的数据连接起来的过程。

在ReactJS中，组件被渲染到用户界面，组件的逻辑包含要在视图（UI）中显示的数据。要在视图中显示的数据与组件逻辑之间的连接在 ReactJS 中称为数据绑定。

单向数据绑定： ReactJS 使用单向数据绑定。在单向数据绑定中，可以遵循以下条件之一：

• 要查看的组件：组件数据的任何更改都会反映在视图中。
• 视图到组件：视图中的任何更改都会反映在组件的数据中。

为了演示代码示例，我们必须使用以下步骤创建一个基本的 React 应用程序。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

项目结构：它将如下所示。

项目结构

实现组件以查看数据绑定：

在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React, { Component } from 'react';
  
class App extends Component {
    
  constructor() {
    super();
    this.state = {
      subject: "ReactJS"
    };
  }
  
  render() {
    return (
      

        
GeeksForGeeks
        
{this.state.subject} Tutorial
  
      
    )
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

启动 React App 后的输出

说明：该组件包含一个标题、一个段落和一个状态变量subject 。此状态变量的值绑定到标题和段落元素，并且状态变量（即主题）的任何更改都将反映在视图部分中。

实现视图到组件数据绑定：

我们不能在 ReactJS 中直接将 View 应用到 Component 数据绑定，为此我们必须向视图元素添加事件处理程序。

在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

应用程序.js

import React, { Component } from 'react';
  
class App extends Component {
  
  constructor() {
    super();
    this.state = {
      subject: ""
    };
  }
  
  handleChange = event => {
    this.setState({
      subject: event.target.value
    })
  }
  
  render() {
    return (
      

        
GeeksForGeeks
        
        
{this.state.subject} Tutorial
  
      
    )
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

解释: 该组件包含一个标题、一个段落、一个输入字段和一个状态变量subject 。这里我们使用 onChange 事件，当用户在输入字段中输入值时，更改会反映在状态变量主题中，我们可以在视图中看到更改的值。