如何在React中显示对象中的输入值

在React中显示对象中的输入值，可以通过以下步骤实现：

创建一个React组件，用于显示对象中的输入值。可以使用函数组件或类组件来实现。
在组件中定义一个状态变量，用于存储输入值。可以使用useState钩子函数或类组件的state来实现。
在组件的渲染方法中，使用JSX语法将输入值显示在页面上。可以通过访问状态变量来获取输入值。
如果对象中的输入值是嵌套的，可以使用点操作符或解构赋值来访问嵌套属性。

以下是一个示例代码，演示如何在React中显示对象中的输入值：

import React, { useState } from 'react';

const DisplayInputValues = () => {
  const [inputValues, setInputValues] = useState({
    name: '',
    email: '',
    age: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setInputValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  return (
    <div>
      <input
        type="text"
        name="name"
        value={inputValues.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={inputValues.email}
        onChange={handleChange}
      />
      <input
        type="number"
        name="age"
        value={inputValues.age}
        onChange={handleChange}
      />

      <h2>Name: {inputValues.name}</h2>
      <h2>Email: {inputValues.email}</h2>
      <h2>Age: {inputValues.age}</h2>
    </div>
  );
};

export default DisplayInputValues;

在上述代码中，我们创建了一个名为DisplayInputValues的函数组件。通过useState钩子函数定义了一个名为inputValues的状态变量，用于存储输入值。在渲染方法中，我们使用input元素来接收用户的输入，并通过onChange事件监听输入变化。通过访问状态变量inputValues，我们将输入值显示在页面上的h2元素中。

这是一个简单的示例，你可以根据实际需求进行扩展和修改。