React native 表单提交后清除单选按钮

我有一个单选按钮的简单表单 我想在提交后清除表格 但它没有被清除这很奇怪

代码如下：

react-native-simple-radio-button

import * as React from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';
import RadioForm, { RadioButton, RadioButtonInput, RadioButtonLabel } from 'react-native-simple-radio-button';
export default class App extends React.Component {

  state = {
      ages: [
        {key:1,label:20},
        {key:2,label:30},
        {key:3,label:40},
      ],

      initialRadioPos: -1
  } 
  render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            flexDirection: 'column',
            marginTop: 10,
            alignItems: 'flex-start',
          }}>
            <RadioForm
              radio_props={this.state.ages}
              initial={this.state.initialRadioPos}
              formHorizontal={false}
              labelHorizontal={true}
              buttonColor={this.state.switched ? '#673AB7' : '#A9A9A9'}
              selectedButtonColor={this.state.switched ? '#673AB7' : '#A9A9A9'}
              onPress={currentAge => {
                this.setState({ currentAge });
              }}
            />
            <Button title="submit" onPress={()=>this.clear()}/>
          </View>
      </View>
    );
  }
  clear = () =>{
    this.setState({
      initialRadioPos:-1
    })
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

import*as React from'React'；
从“react native”导入{文本、视图、样式表、按钮}；
从“react native simple单选按钮”导入RadioForm，{RadioButton，RadioButtonInput，RadioButtonLabel}；
导出默认类App扩展React.Component{
状态={
年龄：[
{键：1，标签：20}，
{键：2，标签：30}，
{键：3，标签：40}，
],
初始无线电位置：-1
} 
render（）{
返回(
{
this.setState（{currentAge}）；
}}
/>
this.clear（）}/>
);
}
清除=（）=>{
这是我的国家({
初始无线电位置：-1
})
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
背景颜色：“#ecf0f1”，
填充：8，
},
});

这是零食的代码你可以查一下

---

我在按下按钮时将initialRadioPos设置为-1，但没有发生任何事情，但我认为代码逻辑是正确的。。。问题出在哪里？问题是您没有更改

initialRadioPos

的值，因此当您调用setState时，它会检查是否有任何更改，注意它是相同的，并且不会重新渲染组件

可以执行以下操作使组件重新渲染。这有点粗糙，但会有用的。通过将RadioForm上的key属性设置为状态中的值，并在清除该值时更新该值，它应该重新呈现表单

代码如下：

react-native-simple-radio-button

import * as React from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';
import RadioForm, { RadioButton, RadioButtonInput, RadioButtonLabel } from 'react-native-simple-radio-button';
export default class App extends React.Component {

  state = {
      ages: [
        {key:1,label:20},
        {key:2,label:30},
        {key:3,label:40},
      ],

      initialRadioPos: -1
  } 
  render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            flexDirection: 'column',
            marginTop: 10,
            alignItems: 'flex-start',
          }}>
            <RadioForm
              radio_props={this.state.ages}
              initial={this.state.initialRadioPos}
              formHorizontal={false}
              labelHorizontal={true}
              buttonColor={this.state.switched ? '#673AB7' : '#A9A9A9'}
              selectedButtonColor={this.state.switched ? '#673AB7' : '#A9A9A9'}
              onPress={currentAge => {
                this.setState({ currentAge });
              }}
            />
            <Button title="submit" onPress={()=>this.clear()}/>
          </View>
      </View>
    );
  }
  clear = () =>{
    this.setState({
      initialRadioPos:-1
    })
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

import*as React from'React'；
从“react native”导入{文本、视图、样式表、按钮}；
从“react native simple单选按钮”导入RadioForm，{RadioButton，RadioButtonInput，RadioButtonLabel}；
导出默认类App扩展React.Component{
状态={
年龄：[
{键：1，标签：20}，
{键：2，标签：30}，
{键：3，标签：40}，
],
initialRadioPos:-1，
formKey:0//在此处设置初始密钥
} 
render（）{
返回(
{
this.setState（{currentAge}）；
}}
/>
this.clear（）}/>
);
}
清除=（）=>{
这是我的国家({
formKey:Math.random（）//更新密钥
})
}
}

---

哦，工作得很有魅力谢谢你。。。如果你能在这个问题上给我1+