[英]How to render checked/selected radio button using radioForm in react native
我是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不会被更新。 请帮忙
您的组件状态中没有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 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.