如何在本机反应中仅从单选按钮组更改值

Question

感谢您的宝贵时间。 这应该很简单，但我无法处理。

我有一个“调查”，其中包含几个问题和每个问题的 3 个单选按钮。 问题是：当我从任何单选按钮中选择一个选项时，每个问题都会选择相同的选项。

我只需要更改这个组的值。 我正在使用 react-native-paper 中的 RadioButton。 RadioButton.Group 应该处理这个问题，但我无处可去。 我怎样才能做到这一点？我看到了一个使用 react-native-simple-paper 的示例，但它使用了 Classes，而我使用了 Function 组件，所以我不能像几乎所有其他库一样使用 setState。

这是我的代码示例：

const [value, setValue] = React.useState('');

<ScrollView style={{ flexDirection: 'column' }}>
        {questions &&
          questions .map((p) => {
            return (
              <View style={{
                //flexDirection: 'column',
                elevation: 1,
                borderRadius: 5,
                backgroundColor: '#fff',
                marginTop: 15,
                marginLeft: 15,
                marginRight: 15,
                padding: 10
              }}>
                <Text
                  style={{
                    color: '#16416e',
                    fontFamily: 'Khula-Bold',
                    textTransform: 'capitalize',
                    fontSize: 20
                  }}>
                  {myCount++ + ' - ' + p.QUESTION_TEXT}
                </Text>
                <View style={{ marginTop: 15 }}>
                  <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value} key={myCount - 1}>
                    <View style={{ flexDirection: 'row' }}>
                      <RadioButton key={"S" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="S" />
                      <Text onPress={() => { setValue("S") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }} >Sim</Text>
                    </View>
                    <View style={{ flexDirection: 'row' }}>
                      <RadioButton key={"N" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="N" />
                      <Text onPress={() => { setValue("N") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }}>Não</Text>
                    </View>
                    <View style={{ flexDirection: 'row' }}>
                      <RadioButton key={"NA" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="NA" />
                      <Text onPress={() => { setValue("NA") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }}>N/A</Text>
                    </View>
                  </RadioButton.Group>
                </View>
              </View>
            );
          })}
      </ScrollView>

Answer 1

它正在使用react-native-radio-buttons-group 工作

可以为您提供更详细的支持。