如何在本机反应中使用radioForm呈现选中/选定的单选按钮

Question

我是 React-native 的新手。我为单选按钮“男性”、“女性”、“其他”设置了三个值，分别为“141”、“142”、“143”。 最初选择了“男性”，但如果我们选择“女性/其他”，它仍然显示“男性”为选中状态，尽管值正在保存。 我的代码 sn-p 在下面提到：

    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"
            },
        })
    })
  }

在 main 中，This.state.value 没有得到更新。请帮忙

Answer 1

您的组件状态中没有 value 和 valueIndex。理想情况下，您应该将 genderValue 置于组件的状态中，该状态会在选择选项时更改其值。您的状态应如下所示：

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。