javascript - 仅更改单击 View 的样式，而不是所有 View

Question

我有一个<TouchableWithoutFeedback>包裹在一个封闭 View 中，我想在单击该封闭 View 时更改它的颜色，即 onPressIn ，但是所有 View 的颜色都会改变，我的意思是映射的 View ，请问如何使 onPressIn 仅更改该特定 View 的样式而不是全部 View

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"
  }
});

Answer 1

您必须跟踪通过 map 创建的每个 TTouchableWithoutFeedback 组件的 bool 状态。

不要把pressed作为 bool 值，而是将其变成一个对象来跟踪每个组件。

与此类似的事情。

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>;
  }
}

---

更新

这里是解释代码如何工作的补充说明。
提问者 @Aravind S

could you please clarify my doubt in your answer? pressed is an object pressed: {} and in handlePressedIn your doing pressed[i] = !pressed[i]; where i is the index of the view...its an array then...right? are you return an object array? so how is it working?

当用户第一次点击时，

pressed[i] 最初是未定义。但是 !undefined 返回 true，因此 pressed[i] 的初始值为 true。

按下:{} 被初始化为对象以仅存储所需的数据。
如果它被初始化为数组pressed: []，它会因为未定义值而浪费空间。

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

工作演示