React Native中的单选按钮组

ffx8fchx  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(184)

我已经尽可能地简化了代码,所以它并不复杂。下面的代码对于单个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"]
      }
    ]
}

//App.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>
}
  • 谢谢-谢谢
carvr3hs

carvr3hs1#

您不能像这样更改多个单选按钮值,您必须为每个单选按钮管理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>
  );

相关问题