更改样式仅适用于单击的视图,而不适用于所有视图

阿杜基耶·艾露恩

我有一个<TouchableWithoutFeedback>环绕的视图,我想在单击时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"
  }
});
dance2die

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

与其pressed成为布尔值,不如使其成为对象以跟踪每个组件。

与此类似的东西。

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
提问

您能否在回答中澄清我的疑问?被按下的是被按下的对象:{}并在handlePressed中正在被按下[i] =!pressed [i]; 我在哪里是视图的索引...它的数组然后...对吗?您是否返回对象数组?那么它如何运作?

pressed[i]最初undefined是用户首次点击时。但是!undefined返回true,因此的初始值为pressed[i]true。

pressed: {}被初始化为仅存储所需数据的对象。
如果将其初始化为array pressed: [],则会浪费带有undefined值的空间

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

在此处输入图片说明

工作演示

进行修改。answer.51516825

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Xamarin样式不适用于自定义视图

React Native样式不适用于父视图?

findViewById不适用于特定视图

ScrollView不适用于SimpleAccordian视图/

分区视图不适用于参数

滚动不适用于移动视图

CGRectContainsPoint不适用于不同的视图

动画不适用于SwiftUI视图状态更改

共享布局视图不适用于ASP.NET Core 2.1中的所有视图

NVActivityIndicatorView仅适用于特定视图

更改DateSeparator不适用于所有CultureInfos

更改字体并不适用于所有地方

点击事件同时适用于所有视图按钮

具有背景更改的多选列表视图不适用于iOS

样式检查仅适用于内联,不适用于样式表

范围修剪视图实现不适用于反向视图

标签更改仅适用于单击的元素,而不是所有具有相同类的元素

Android FindViewById仅适用于子布局(列表视图行),不适用于父布局中的TextView

锚HTML(<a>)仅适用于右键单击,而不适用于左键单击

CSS div样式仅适用于div中的第一行,而不适用于div中的所有内容

滚动条的样式仅适用于div,不适用于整个主体

使用@State 变量不适用于从子视图更改 Body 中的视图状态

带有表格视图的视图仅适用于默认的视图控制器

Python Messenger Bot仅适用于管理员,不适用于所有人

PHP Codeigniter-克隆数据(仅适用于1个单行,但不适用于所有行)

我安装的字体(@ font-face)不适用于所有浏览器-仅适用于Chrome

具有成分布局的集合视图不适用于标题视图

组件样式不适用于仿真视图封装(Angular 5)

SVG路径不适用于容器视图框