如何<TextInput>一次更改多个元素的颜色<View>？

Question

我的表格具有带有多个<TextInput>元素的View。当用户单击提交按钮时，所有字段应成为non-editable，这是可能的，

<View pointerEvents='none'>
</View>

，但它只能阻止用户不编辑字段，但不会给出字段的外观，因为它是disabled。

因此，是否有任何方法可以一次将disable的外观给所有<TextInput>元素？

Answer 1

我想不出任何可以帮助您提供"禁用" UI的道具。Pointerevents允许您防止每个组件的编辑。实际上，TextInput具有可编辑的道具，但没有残疾的道具。这表明没有内置的视觉提示可以表明该组件无法编辑。默认情况下，唯一的线索是，当您专注于项目时，没有键盘出现。简而言之，没有任何可用的开箱即用可以为您的每个组件提供残疾的视觉提示。

Answer 2

对于<TextInput>的出现，您需要根据条件指定<TextInput>的背景彩色，当您制作<TextInput>不可编辑时。

state = {
    text:"",
    isEditable:true
}
<TextInput
    editable={this.state.isEditable}
    style={{height: 40, backgroundColor:(this.state.isEditable)?'white':'#EDEEEF'}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
/>

和在提交按钮上按下您的所有验证成功后，您可以将isEditable设置为false：

onSubmit(){
   //Your logic goes here after successful validation set isEditable to false
   this.setState({isEditable:false});
}