Question

我有一个包含3个元素的数组，数组的每个元素都有2个对象，如下所示：

text {field1：'xyz'，field2：'def'} 元数据{id：42，时间戳：'02 -25-2018'}

在一个反应应用程序上，我有一个元素列表，每个元素都显示数组[i] .text.field1。我想实现一个单击处理程序，当用户单击一个元素时，它会切换一个状态（基于他们单击的元素）。如何根据嵌套的field1值索引到数组中的正确元素？如果我需要在这里添加更多颜色，请告诉我。

Answer 1

创建元素无状态组件，并将数组中的元素数据作为props传递。使用闭包将此props传递给onClick处理程序。

import React from 'react';

export default (props) => {
  const { text: { field1, field2 } } = props;
  return <div>
           <h1
              onClick={((e) => onFieldClick(e, props))}
           >
           {field1}
           </h1>
  </div>;
};

const onFieldClick = (e, props) => {
  alert(props.text.field1);
}

Demo

如何根据包含的对象字段的值选择数组中的元素？

1 个答案: