如何在React Native中使用radioForm呈現選中/選定的單選按鈕

Question

我是React-native的新手。 對於單選按鈕“ Male”，“ Female”，“ other”，我有三個值，分別具有值“ 141”，“ 142”，“ 143”。 最初選擇“男性”，但是如果我們選擇“女性/其他”，盡管值被保存，但仍顯示為“男性”。 我的代碼段如下所述：

    class advanced_targeting extends Component {
       static navigationOptions = {
          title: 'Advanced Targeting',
       };
      constructor() {
          super(props)
         this.state = {
           isLoading: true,
           radio_props: [{ label: 'Male', value: 141 }, { label: 'Female', value: 142 }, { label: 'Other', value: 143 }],
         }
       }
       render() {
          return (
           <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
              <View style={styles.MainContainerViewCamp}>
                <Text style={{ padding: 5, fontSize: 35, backgroundColor: '#2196F3', marginBottom: 7 }}> Advanced Targeting</Text>
                  <ScrollView keyboardShouldPersistTaps='always'>
                     <RadioForm
                        ref="radioForm"
                        style={styles.radioButtonStyle}
                        radio_props={this.state.radio_props}
                        isSelected = {true}
                        initial={this.state.value}
                        formHorizontal={true}
                        buttonColor={'#2196f3'}
                        labelStyle={{ marginRight: 20 }}
                        animation={true}
                        onPress={(value,index) => {
                          this.setState({
                             value: value,
                             valueIndex: index
                          })
                        }} />
               <TouchableOpacity
                   style={styles.SubmitButtonStyle}
                   activeOpacity={.5}
                   onPress={this.saveAdvancedDemography}
               >
                 <Text style={styles.TextStyle}> SAVE DETAILS </Text>
               </TouchableOpacity>
            </ScrollView>
         </View>
      </TouchableWithoutFeedback>
    );
  }
   saveAdvancedDemography = () => {
        const base64 = require('base-64');
       fetch('APIURL', {
           method: 'POST',
           headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              "Authorization": "Basic " + base64.encode("demo:ABCD")
           },
        body: JSON.stringify(
        {

          "dmp_sex":
            {
              "main": this.state.value,
              "data_type": "STRING"
            },
        })
    })
  }

總的來說，This.state.value不會被更新。 請幫忙

Answer 1

您的組件狀態中沒有value和valueIndex 。 理想情況下，應將性別值置於組件的狀態，該狀態將在選擇選項時更改其值。 您的狀態應如下所示：

constructor() {
  super(props)
  this.state = {
    genderValue: 141,
    isLoading: true,
    radio_props: [{ label: 'Male', value: 141 }, { label: 'Female', value: 142 }, { label: 'Other', value: 143 }],
  }
}

在您的RadioForm中：

<RadioForm
  ...
  initial={ this.state.genderValue }
  onPress={(value) => {
    this.setState({
      genderValue: value,
    })
  }} />

然后，您可以在saveAdvancedDemography（）中使用this.state.genderValue 。