Javascript 更改仅单击视图而不是所有视图的样式

我有一个

包裹在一个封闭视图周围，我想在单击该封闭视图时更改其颜色，即

onPressIn

，但所有视图的颜色都会更改，我指的是映射视图，请问如何使onPressIn仅更改该特定视图的样式而不是所有视图的样式

const herbs = this.state.record.map(herb => (
  <TTouchableWithoutFeedback
    onPressIn={() => this.setState({ pressed: !this.state.pressed })}
    key={herb.id}
  >
    <View style={this.state.pressed ? BackStyles.herbBox : BackStyles.herb_box}>
      <Image
        style={BackStyles.image}
        source={{ uri: `${herb.name.replace(/ /g, "")}` }}
      />
      <View style={{ flexDirection: "column" }}>
        <Text style={BackStyles.header}>{herb.name}</Text>
        <Text style={BackStyles.sub}>{herb.bot}</Text>
      </View>
    </View>
  </TTouchableWithoutFeedback>
));

const BackStyles = StyleSheet.create({
  herb_box: {
    backgroundColor: "#fff",
    borderRadius: 7,
    marginTop: 10,
    marginBottom: 10,
    flexDirection: "row",
    width: "95%",
    alignSelf: "center"
    //   height: '2%'
    //  justifyContent: 'center',
  },
  herbBox: {
    backgroundColor: "#28B564",
    borderRadius: 7,
    marginTop: 10,
    marginBottom: 10,
    flexDirection: "row",
    width: "95%",
    alignSelf: "center"
  }
});

const herbs=this.state.record.map（herb=>(
this.setState（{pressed:！this.state.pressed}）}
key={herb.id}
>
{herb.name}
{herb.bot}
));
const BackStyles=StyleSheet.create({
药盒：{
背景颜色：“fff”，
边界半径：7，
玛金托普：10，
marginBottom:10，
flexDirection:“行”，
宽度：“95%”，
自我定位：“中心”
//身高：“2%”
//为内容辩护：“中心”，
},
盒子：{
背景颜色：“28B564”，
边界半径：7，
玛金托普：10，
marginBottom:10，
flexDirection:“行”，
宽度：“95%”，
自我定位：“中心”
}
});

您必须跟踪每个

t触摸屏的布尔状态，而无需反馈
通过
映射创建的组件

不要将按下的
作为布尔值，而是将其设置为对象以跟踪每个组件

类似的东西

class App extends Component {
  state = {
    pressed: {}
  };

  handlePressedIn = i => {
    this.setState(prevState => {
      const pressed = { ...prevState.pressed };
      pressed[i] = !pressed[i];
      return { pressed };
    });
  };

  render() {
    const herbs = this.state.record.map((herb, i) => (
      <TTouchableWithoutFeedback
        onPressIn={() => this.handlePressedIn(i)}
        key={herb.id}
      >
        <View
          index={i}
          style={
            this.state.pressed[i] === i && this.state.pressed
              ? BackStyles.herbBox
              : BackStyles.herb_box
          }
        >
          <Image
            style={BackStyles.image}
            source={{ uri: `${herb.name.replace(/ /g, "")}` }}
          />
          <View style={{ flexDirection: "column" }}>
            <Text style={BackStyles.header}>{herb.name}</Text>
            <Text style={BackStyles.sub}>{herb.bot}</Text>
          </View>
        </View>
      </TTouchableWithoutFeedback>
    ));
    return <div>{herbs}</div>;
  }
}

类应用程序扩展组件{
状态={
按下：{}
};
扶手DIN=i=>{
this.setState（prevState=>{
const pressed={…prevState.pressed}；
按下[i]=！按下[i]；
返回{按下}；
});
};
render（）{
常量药草=this.state.record.map（（药草，i）=>(
这是我的手镯（i）}
key={herb.id}
>
{herb.name}
{herb.bot}
));
返回{药草}；
}
}


更新
下面是一个补充说明，解释代码是如何工作的。

询问

你能在回答中澄清我的疑问吗？这是一个物体
按：{}在你的手上按[i]=
!按[我]；其中i是视图的索引…它是一个数组
然后…对吗？是否返回对象数组？那么它是如何工作的呢

当用户第一次单击时，
按下[i]
最初是
未定义的。
但是
！未定义的
返回true，因此按下的[i]
的初始值将为true

按下：{}
被初始化为只存储所需数据的对象。

如果它被初始化为一个数组
按下：[]
，它将浪费
未定义的
值的空间

基本上
return{clicked}
返回一个以位置（索引）为键的对象/字典


工作演示
当您执行
this.setState
时，它将重新呈现我如何避免使用此.setState的所有想法？为此，您最好使用
Flatlist
。这很漂亮，但感谢@sungkimi变量，在this.state中。按[I]可从何处获取from@SungKim你能在回答中澄清我的疑问吗？按下是一个对象，
pressed:{}
并且在
handlePressedIn
yourding
pressed[i]=！按[我]其中
i
是视图的索引…它是一个数组…对吗？是否返回对象数组？那么它是如何工作的呢？Thanks@SungKim说得好！谢谢你的澄清，我在我的博客中进一步解释了这一点