如何在react js中显示输入字段中输入的数据？

在React.js中显示输入字段中输入的数据，可以通过以下步骤实现：

创建一个React组件，用于渲染输入字段和显示输入数据的部分。可以使用class或function关键字来定义组件。
在组件的状态中定义一个变量，用于存储输入字段中的数据。可以使用useState钩子函数或this.state来管理状态。
在输入字段中添加一个onChange事件处理程序，以便在输入发生变化时更新状态中的数据。在事件处理程序中，可以使用event.target.value来获取输入字段的值，并将其更新到状态变量中。
在组件的渲染方法中，使用状态变量来显示输入字段中的数据。可以将状态变量直接插入到JSX代码中，以便在页面上显示。

以下是一个示例代码，演示如何在React.js中显示输入字段中输入的数据：

import React, { useState } from 'react';

function InputDisplay() {
  const [inputData, setInputData] = useState('');

  const handleInputChange = (event) => {
    setInputData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputData} onChange={handleInputChange} />
      <p>输入的数据是：{inputData}</p>
    </div>
  );
}

export default InputDisplay;

在上面的代码中，我们创建了一个名为InputDisplay的函数组件。它使用useState钩子函数来定义一个名为inputData的状态变量，并使用setInputData函数来更新该变量。

在handleInputChange事件处理程序中，我们通过event.target.value获取输入字段的值，并将其更新到inputData状态变量中。

最后，在组件的渲染方法中，我们将输入字段和显示输入数据的部分放在一起。输入字段的值通过value属性与inputData状态变量绑定，以确保输入字段始终显示最新的值。而显示输入数据的部分则直接使用inputData状态变量来显示。

这样，当用户在输入字段中输入数据时，页面上的显示部分会实时更新为输入的数据。