我希望根据在map()中单击对象来填充输入值: React+Typescript

在React和Typescript中，可以使用map()方法来遍历一个对象数组，并根据点击对象来填充输入值。下面是一个示例代码：

import React, { useState } from 'react';

interface MyObject {
  id: number;
  name: string;
}

const MyComponent: React.FC = () => {
  const [inputValue, setInputValue] = useState('');

  const myObjects: MyObject[] = [
    { id: 1, name: 'Object 1' },
    { id: 2, name: 'Object 2' },
    { id: 3, name: 'Object 3' },
  ];

  const handleObjectClick = (object: MyObject) => {
    setInputValue(object.name);
  };

  return (
    <div>
      {myObjects.map((object) => (
        <div key={object.id} onClick={() => handleObjectClick(object)}>
          {object.name}
        </div>
      ))}
      <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
    </div>
  );
};

export default MyComponent;

在上面的代码中，我们定义了一个名为MyObject的接口，表示对象的类型。然后，我们在MyComponent组件中定义了一个状态inputValue来保存输入框的值。myObjects是一个包含多个MyObject对象的数组。

在handleObjectClick函数中，我们根据点击的对象来更新输入框的值。通过map()方法遍历myObjects数组，为每个对象创建一个<div>元素，并在点击时调用handleObjectClick函数。

最后，我们在组件的返回值中渲染了这些<div>元素和一个输入框，输入框的值绑定到inputValue状态，并在输入框的变化时更新inputValue。

这样，当你点击某个对象的<div>元素时，输入框的值会被填充为该对象的名称。

腾讯云相关产品和产品介绍链接地址：