我使用React Native制作了一个表单,但我希望在TextInput为空时禁用记录按钮,并且当填入所有TextInput时,该按钮将返回启用状态。
我该怎么做?你能寄给我一些例子吗?
答案 0 :(得分:3)
您可以这样做:
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
s的每个值存储在状态中,并切换disabled
的{{1}}道具(也适用于Touchable*
)组件值已填充。
在这里,您还可以进行一些基本的验证,如长度或匹配模式。