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

Question

所以我有一个组件可以将我的卡片呈现为波纹管;

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/> 的实现，以便从this.props而不是this.state中检索selected，并通过onChanged()回调传回所选卡的cardId，如下所示：

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
  */
}

希望这有帮助！