單選按鈕列表不適用於循環本機響應

Question

我將單選按鈕紙包裝用於單選按鈕。 我使用單選組並循環渲染單選按鈕。 我想在更改事件中獲取單選按鈕的值。

這是我的單選按鈕組的功能：

loadCosts(item) {
    var cont = 0;
    var output=[];
    for (var i = 0; i < this.cost_length; i++) {
      var days = item.cost[i].days;
      var cost = item.cost[i].cost;
      var tempItem=  (
        <View key={i} style={{flexDirection:'row'}}>
          <RadioButton value={i} onPress={() => {this.setState({ days:days, price:cost[![enter image description here][1]][1] })}} />
          <Text style={[styles.fontSmall,styles.colorTheme,styles.radioButtonText]}>Cost for {item.cost[i].days} £{item.cost[i].cost}</Text>
        </View>
     );
    output[i] = (tempItem);
   }

    return(
      <RadioButton.Group
        onValueChange={value => this.setState({ value:value })}
        value={this.state.value}
      >
        {output}
      </RadioButton.Group>
    )
  }

Answer 1

不用於地圖。 對於迭代和多數民眾贊成在。 您需要返回一個Components數組。 將返回的JSX輸出替換為map：

loadCosts(item) {
  return(
    <RadioButton.Group
      onValueChange={value => this.setState({ value:value })}
      value={this.state.value}
    >
     {item.cost.map(({ days, cost }, i) => (
       <View key={i} style={{flexDirection:'row'}}>
         <RadioButton value={i} onPress={() => {this.setState({ days:days, price:cost[![enter image description here][1]][1] })}} />
         <Text style={[styles.fontSmall,styles.colorTheme,styles.radioButtonText]}>`Cost for ${days} £${cost}`</Text>
       </View>
     ))}
    </RadioButton.Group>
  )
}

Answer 2

我們還可以通過添加一個圖像作為單選按鈕（選定或未選定的圖像），並在單擊或單擊一行時，然后動態更改圖像來解決此問題。

<TouchableOpacity onPress={this.onPress} style={{ flex:1}}>
      <View style={{ flex: 1 }}>
      <View style={ViewStyles.rowContentView}>
      <View style={{ flex: 0.8 }}>{this.props.title}</View>
      <View style={{ flex: 0.1 }} />
      <Image source={this.state.selected ? radioSelectedImage.source : radioImageimage.source} style={image.style} />;
                 {this.renderDetailDisclosure()}
                </View>
            </View>
    </TouchableOpacity>