reactjs - 如何在 Map Function React 或 react-native 中禁用特定的 TextInput 字段

Question

如果选择器已交付和拒绝，我想禁用特定的 TextInput，并且想要在待处理和完成时使用 TextInput(editable)

const [arrayList, setArraylist]= [
         {id:0, name:'A', DeliveredQuantity:7},
         {id:1, name:'B', DeliveredQuantity:9},
         {id:2, name:'C', DeliveredQuantity:11},
         {id:3, name:'D', DeliveredQuantity:30},
     ]

const [isEditable,setisEditable]=useState(true) 

const updateStatus= (key,value)=>

   setisEditable(false)
} 

 { 
    arrayList.map((items,index)=>{
        return 
              <View>
                 <TextField   editable={isEditable}  value={items.DeliveredQuantity} />

                 <Picker mode="dropdown" selectedValue={selectedStatus}
                         onValueChange={(value)=>updateStatus(index,value)} >        
                    <Picker.Item  label='Pending'   value='1' />
                    <Picker.Item  label='Delivered'   value='2' />
                    <Picker.Item  label='Completed'   value='3' />
                    <Picker.Item  label='Returned'  value='4' /> 
                </Picker>
   } 
} 

标签： reactjsreact-nativereact-hooks

Answer 1

根据您的要求，这是一个更新的答案。

const [arrayList, setArraylist]= [
         {id:0, name:'A', DeliveredQuantity:7},
         {id:1, name:'B', DeliveredQuantity:9},
         {id:2, name:'C', DeliveredQuantity:11},
         {id:3, name:'D', DeliveredQuantity:30},
     ]

const [isEditable,setisEditable]=useState(true) 

const updateStatus= (key,value)=>

   //if delivered or rejected
   (value === 2 || value ===4) && setisEditable(false)
} 

 { 
    arrayList.map((items,index)=>{
        return 
              <View>
                 <TextField   editable={isEditable}  value={items.DeliveredQuantity} />

                 <Picker mode="dropdown" selectedValue={selectedStatus}
                         onValueChange={(value)=>updateStatus(index,value)} >        
                    <Picker.Item  label='Pending'   value='1' />
                    <Picker.Item  label='Delivered'   value='2' />
                    <Picker.Item  label='Completed'   value='3' />
                    <Picker.Item  label='Returned'  value='4' /> 
                </Picker>
   } 
}