我使用 React Native 制作了一个表单,但是我希望在 TextInput 为空时禁用记录按钮,并且当填充所有 TextInput 时,该按钮将恢复为启用状态。
我该怎么做?可以给我发一些例子吗?
最佳答案
你可以这样做:
class Form extends Component {
constructor(props) {
super(props);
this.state = { name: '', email: '' };
}
render() {
const { name, email } = this.state;
return (
<View>
<TextInput
onChangeText={name => this.setState({ name })}
value={name}
/>
<TextInput
onChangeText={email => this.setState({ email })}
value={email}
/>
<TouchableHighlight disabled={!name || !email}>
Submit
</TouchableHighlight>
</View>
);
}
}
基本上,您将 TextInput
的每个值存储在状态中,并切换 Touchable*
的 disabled
属性(也可以当所有值都被填充时,对于 Button
) 组件。
在这里您还可以进行一些基本验证,例如长度或匹配模式。
关于javascript - 按钮 - 启用和禁用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40645467/