React Native 中的单选按钮组

Question

我已使代码尽可能简单，因此并不复杂。 以下代码对于单个 formField（每个无线电组）都可以正常工作，但是当我将多个无线电组打印到屏幕时，如何正确使用 state？

在下面的示例中，屏幕上将打印 2 个无线电组，如果选定的索引在其中一个发生变化，则在另一个中也会发生变化。

基本上我有如下数据；

{
  "formfields": [
    {
      "ItemId": 1314,
      "Details": "Has sufficient clearance been allowed for around the outdoor unit?",
      "FieldType": 4, // radio
      "FieldOrder": 2,
      "ChecklistID": 190,
      "IsRequired": true,
      "InitialValue": ["Yes","No"]
    },
    {  
      "ItemId": 1315,
      "Details": "Is the unit installed on a level and sound base?",
      "FieldType": 4,
      "FieldOrder": 3,
      "ChecklistID": 190,
      "IsRequired": true,
      "InitialValue": ["Yes","No"]
      }
    ]
}

//应用程序.js;

import Radio from "/components/Radio";

const App = (props, {navigation}) => {
const [selected, setSelected] = useState()

  return(
    <View>
      {FormFields.map(item => {                                    
          if (item.FieldType === 4) {
              return (
                  <Radio 
                      selected={selected}
                      options={item.InitialValue} 
                      horizontal={true} 
                      onChangeSelect={(opt, i)=> {
                          setSelected(i);
                      }}/>
              );
          }
        })
      }
    </View>
  )
}

// 收音机.js

const Radio = ({options = [], horizontal=false, onChangeSelect, selected}) => {
    return <View style={[horizontal? style.horizontal : style.vertical, {marginTop:5}]}>
        {
            options.map((opt, index) => (
                <TouchableOpacity 
                    onPress={() => onChangeSelect(opt, index)} 
                    style={[style.optContainer, {marginLeft: horizontal? 10: 0, marginTop: horizontal? 0:10}]}>
                    <View style={style.outlineCircle}>
                        {selected == index && <View style={style.innerCircle}/>}
                    </View>
                    <Text style={[style.txt, {color:selected == index ? '#444' : '#777'}]}>{opt}</Text>
                </TouchableOpacity>
            ))
        }
    </View>
}

谢谢。

Answer 1

您不能像这样更改多个单选按钮的值，您必须为每个单选按钮管理 FormFields 数组。 您的工作代码应该如下所示。 我在数组中添加了 Selected 属性来管理值。

    const [formFields, setFormFields] = useState([
    {
      ItemId: 1314,
      Details:
        'Has sufficient clearance been allowed for around the outdoor unit?',
      FieldType: 4, // radio
      FieldOrder: 2,
      ChecklistID: 190,
      IsRequired: true,
      InitialValue: ['Yes', 'No'],
      Selected: 2,
    },
    {
      ItemId: 1315,
      Details: 'Is the unit installed on a level and sound base?',
      FieldType: 4,
      FieldOrder: 3,
      ChecklistID: 190,
      IsRequired: true,
      InitialValue: ['Yes', 'No'],
      Selected: 2,
    },
  ]);

  return (
    <View>
      {formFields.map((item,itemIndex) => {
        if (item.FieldType === 4) {
          return (
            <Radio
              selected={item.Selected}
              options={item.InitialValue}
              horizontal={true}
              onChangeSelect={(opt, i) => {
                let newArr = [];
                formFields.filter((item, index) => {
                  if (index === itemIndex) {                       
                    newArr.push({ ...item, Selected: i });
                  } else {
                    newArr.push(item);
                  }
                  return newArr;
                });
                setFormFields(newArr);
              }}
            />
          );
        }
      })}
    </View>
  );