想写一个类似购物车列表,点击前面的复选框可以全选,单选(有截图)



  • 有木有好心人,可以写个小样啊,真心不会啊,
    0_1554965393344_25bb2cbc-8900-44d8-875d-20442134ffe9-image.png



  • @ZhaoGuoTing 维护一个选中的项目id的数组,然后每一行在渲染时去检查当前行的id是否在选中列表中





  • @zhaoguoting 前辈尽量说的通俗易懂些,我以前是设计,底子比较差



  • @zhaoguoting 愁的都想离职跑路了



  • 把Item做成单独的组件,选中状态维护在item中,这样切换单个项的选中状态时不会影响到其他行



  • @yoonzm想写一个类似购物车列表,点击前面的复选框可以全选,单选(有截图) 中说:

    切换单个项的选中状态时不会影响到

    @ZhaoGuoTing 你如果是用的flatlist里面有个extraData的参数,这个参数也可以用来控制列表的重新渲染,那么你就可以在每一行选中的时候,将该行的id加入到一个数组中(extraData的值就是这个数组),每次加入数组的时候,记得保证数组一定是变化的(内存地址的变化),然后在renderitem中去检查当前行的id是否在数组中(在的话就显示选中状态),然后在每行的选中与取消选中按钮那里,去做extraData值的改变, 全选的话类似(一次性加入所有行id而已)

    如果你用的scrollview,那么粗暴点就是维护选中的元素id数组state.selected,在改变行选中时,在selected数组中进行增减,并在render每一行时,检查这行的id在没在数组中(有无选中),方法和上面都差不多



  • 此回复已被删除!


  • @guopeng1994
    选中的列表项还是要维护的,因为全选时需要父组件去改变子组件的状态,而且父组件需要知道当前子组件是不是全部被选中的,但是子组件本身的状态可以维护在子组件内,这样单个项的状态改变不会触发其他行的渲染



  • export default class MessageItem extends Component {
      static propTypes = {
        item: PropTypes.object.isRequired,
        index: PropTypes.number.isRequired,
        editable: PropTypes.bool,
        selectedOnChange: PropTypes.func,
      };
    
      constructor(props) {
        super(props);
        this.state = {
          selected: false
        };
      }
    
      componentWillReceiveProps({ editable }) {
        // 父组件从展开到关闭时取消子组件选中状态
        if (!editable && this.props.editable && this.state.selected) {
          this.setState({ selected: false });
        }
      }
    
      /**
       * 编辑状态点击切换选中状态 否则跳转至消息详情
       * @param index
       */
      onItemPress = (item) => {
        const { selectedOnChange } = this.props;
    
        this.setState(state => ({
          selected: !state.selected
        }), () => setTimeout(() => {
          // 解决子组件渲染与父组件渲染冲突卡顿
          selectedOnChange && selectedOnChange(item, this.state.selected);
        }, 200));
      };
    
      render() {
        const { item } = this.props;
        const { selected } = this.state;
        return (
          <ListItem
            key={item && item.id}
            style={[
              styles.container,
              selected && { backgroundColor: '#dbdbdb' }
            ]}
            onPress={() => this.onItemPress(item)}
          >
            {this.renderCheckBox()}
            {this.renderAtatar()}
            {this.renderMsgBody()}
          </ListItem>
        );
      }
    }
    

    这个是之前写的, 好久不用了, 就是这个逻辑, 你看下@guopeng1994



  • @yoonzm 选中的列表项肯定要维护, 之前的逻辑怎么了?