我已经尽可能地简化了代码,所以它并不复杂。下面的代码对于单个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>
}
- 谢谢-谢谢
1条答案
按热度按时间carvr3hs1#
您不能像这样更改多个单选按钮值,您必须为每个单选按钮管理FormFields数组您工作代码应该如下所示我在数组中添加了Selected属性来管理值