javascript - 如果选择了另一个选项，如何取消选择来自 Array 的选项

Question

所以我有一个组件可以呈现我的卡片，称为 CardListing，如下所示；

return getWalletPayment.map(payment => (
  <CardListing
    key={payment._id}
    card={payment.card}
    cardNo={payment.cardNo}
    onChanged={selected => {
      this.setState({ selectedCard: selected });
    }}
  />
));

现在它将渲染两张卡片。如果我选择一个，一切都很好，但如果我选择第二个，第一个将保持选中状态，直到我再次点击它取消选择。

这里是实现代码

export default class CardListing extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: false,
      scaleCheckmarkValue: new Animated.Value(0)
    };
    this.scaleCheckmark = this.scaleCheckmark.bind(this);
    this.selectPaymentOption = this.selectPaymentOption.bind(this);
  }

  scaleCheckmark(value) {
    Animated.timing(this.state.scaleCheckmarkValue, {
      toValue: value,
      duration: 400,
      easing: Easing.easeOutBack
    }).start();
  }

  selectPaymentOption() {
    const { selected } = this.state;
    this.setState({
      selected: !this.state.selected
    });
    this.props.onChanged(selected);
  }

  render() {
    const { selected, scaleCheckmarkValue } = this.state;
    const { card, cardNo } = this.props;
    const number = cardNo.substring(15);
    let logo;
    if (card == "visa") {
      logo = require("../../../assets/images/visa.png");
    }
    if (card == "master-card") {
      logo = require("../../../assets/images/mastercard.png");
    }
    if (card == "amex") {
      logo = require("../../../assets/images/amex.png");
    }
    if (card == "jcb") {
      logo = require("../../../assets/images/jcb.png");
    }
    if (card == "discover") {
      logo = require("../../../assets/images/discover.png");
    }
    const iconScale = this.state.scaleCheckmarkValue.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: [0.01, 1.6, 1]
    });

    const scaleValue = selected ? 1 : 0;
    this.scaleCheckmark(scaleValue);

    return (
      <View>
        <TouchableOpacity
          onPress={() => this.selectPaymentOption(this, cardNo)}
          style={styles.paymentOptionItem}
        >
          <View>
            <View
              style={{
                flexDirection: "row",
                justifyContent: "space-between"
              }}
            >
              <View style={{ flexDirection: "row" }}>
                <Image
                  source={logo}
                  style={{
                    width: 40,
                    height: 30,
                    marginTop: 3
                  }}
                />
                <View
                  style={{
                    flexDirection: "column"
                  }}
                >
                  <Text style={styles.paymentOptionTitle}>
                    {card.toUpperCase()}
                  </Text>
                  <Text style={styles.paymentOptionTitle}>Ending {number}</Text>
                </View>
              </View>
              <Animated.View
                style={[
                  { transform: [{ scale: iconScale }] },
                  styles.iconWrapper
                ]}
              >
                <Icon name="check" color={colors.black} size={20} />
              </Animated.View>
            </View>
          </View>
        </TouchableOpacity>
        <View style={styles.divider} />
      </View>
    );
  }
}

知道如何解决这个问题吗？

Answer 1

考虑从 <CardListing/> 中外部化“选定”状态组件，以便父组件跟踪当前选择了哪张信用卡(而不是每个 <CardListing/> 跟踪内部状态以确定它是否被选中)。

首先提起selected在<CardListing/>之外, 到父组件。这将涉及更改您的父组件映射/渲染功能，如图所示:

/* 
Add this selectedCardId state to parent wallet component and
pass via selectedId. Also pass cardId prop so CardListing can
determine if it is the selected card
*/
return getWalletPayment.map(payment => (
  <CardListing
    key={payment._id}
    card={payment.card}
    cardNo={payment.cardNo}

    cardId={payment._id}
    selectedId={ this.state.selectedCard } 

    onChanged={selectedId => {
      this.setState({ selectedCard: selectedId});
    }}
  />
));

接下来，修改<CardListing/>的实现这样selected检索自 this.props而不是 this.state ，所以 cardId所选卡的信息通过 onChanged() 传回像这样回调:

selectPaymentOption() {
  /*
  Pass the id of the card to be selected to callback
  */
  this.props.onChanged( this.props.cardId);
}

render() {
  /*
  Determine if this card should be rendered a the selected 
  card
  */
  const selected = this.selectedId === this.cardId;

  /* 
  Remaining render method remains unchanged
  */
}

希望这对您有所帮助!