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

因此，我有一个组件，将呈现我的卡，称为CardListing，如下所示

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

返回getWalletPayment.map（付款=>(
{
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>
    );
  }
}

导出默认类CardListing扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选择：false，
scaleCheckmarkValue:新的动画.Value（0）
};
this.scaleCheckmark=this.scaleCheckmark.bind（this）；
this.selectPaymentOption=this.selectPaymentOption.bind（this）；
}
scaleCheckmark（值）{
动画。计时（this.state.scaleCheckmarkValue{
toValue:value，
持续时间：400，
放松：放松
}).start（）；
}
选择PaymentOption（）{
const{selected}=this.state；
这是我的国家({
已选定：！this.state.selected
});
此.props.onChanged（已选择）；
}
render（）{
const{selected，scaleCheckmarkValue}=this.state；
const{card，cardNo}=this.props；
常数编号=卡号子串（15）；
让标志；
如果（卡==“visa”）{
logo=require（“../../../assets/images/visa.png”）；
}
如果（卡==“主卡”）{
logo=require（“../../../assets/images/mastercard.png”）；
}
如果（卡==“美国运通”）{
logo=require（“../../../assets/images/amex.png”）；
}
如果（卡==“jcb”）{
logo=require（“../../../assets/images/jcb.png”）；
}
如果（卡==“发现”）{
logo=require（“../../../assets/images/discover.png”）；
}
const iconScale=this.state.scaleCheckmarkValue.interpolate({
输入范围：[0,0.5,1]，
输出范围：[0.01,1.6,1]
});
const scaleValue=所选？1:0；
这是scaleCheckmark（scaleValue）；
返回(
this.selectPaymentOption（this，cardNo）}
style={style.paymentOptionItem}
>
{card.toUpperCase（）}
结束{number}
);
}
}

---

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

考虑从

组件外部化“选定”状态，以便父组件跟踪当前选择的信用卡（而不是每个

跟踪内部状态以确定是否选中）

首先将所选的

从

外部提升到主部件上。这将涉及对父组件贴图/渲染功能的更改，如图所示：

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

---

希望这有帮助

请将

的实现包含在question@DacreDenny现在看看，我已经添加了完整的实现

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