我有 2 个文本框
- 电子邮件
- 密码
我想禁用该按钮，直到用户输入有效的电子邮件和密码。因此，在 onChange 方法中，我检索form.getValue()触发验证的值，如文档中所述。如果值为null，我将按钮的禁用状态更改为trueelse false。我只想在输入失去焦点或提交而不是每次getValue()调用时显示错误。
一旦onChange被触发，表单就会开始在所有字段中显示错误，因为我调用了form.getValue(). 我只想在用户移动到下一个文本框（焦点从当前文本框丢失）或用户点击提交时才显示错误。当用户刚开始在文本框中输入时，我不想用错误消息来纠缠他。
重现步骤
- 使用包含错误消息的选项创建 2 个表单字段（带有细化的电子邮件和密码）
- 检索 onChange 方法中的值
- 您将开始看到错误消息。
代码
// @flow
import React, { PureComponent } from 'react';
import { View, Text, Platform, TouchableHighlight } from 'react-native';
import t from 'tcomb-form-native';
import { resetTo } from 'src/lib/navigation';
import { SIGNED_IN } from 'src/routes/constants';
import { getErrorMessage } from 'src/lib/auth-helpers';
import { FullScreenBGImage } from 'src/components';
import { text, background } from 'src/styles/';
import LoginBG from '../../../assets/images/login-bg.jpg';
import styles from './style';
type Props = {
loggedIn: boolean,
navigation: Object,
login: (string, string) => void,
user: Object,
};
type States = {
isDisabled: boolean,
value: ?Object,
};
const Email = t.refinement(t.String, email => {
const reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
return reg.test(email);
});
const { Form } = t.form;
// here we define our domain model
const LoginForm = t.struct({
email: Email,
password: t.String,
});
const textboxStyle = {
color: text.color2,
backgroundColor: background.color1,
fontSize: 17,
height: 50,
paddingVertical: Platform.OS === 'ios' ? 7 : 0,
paddingHorizontal: 16,
borderWidth: 1,
marginBottom: 5,
};
const formStylesheet = {
...Form.stylesheet,
textbox: {
normal: {
...textboxStyle,
},
error: {
...textboxStyle,
},
},
errorBlock: {
color: text.error,
},
};
const formOptions = {
auto: 'placeholders',
fields: {
email: { error: 'Enter valid email' },
password: {
error: 'Enter valid password'
password: true,
secureTextEntry: true,
},
},
stylesheet: formStylesheet,
};
class Login extends PureComponent<Props, States> {
loginForm: ?Object;
onFormChange: () => void;
static navigationOptions = {
header: null,
};
constructor(props: Props) {
super(props);
this.loginForm = {};
this.state = {
value: null,
isDisabled: true,
};
this.handleSubmit = this.handleSubmit.bind(this);
this.onFormChange = this.onFormChange.bind(this);
}
/**
* ComponentWillReceiveProps.
*
* Redirect if user is logged in
*/
componentWillReceiveProps(nextProps: Props) {
if (nextProps.loggedIn !== this.props.loggedIn && nextProps.loggedIn) {
resetTo(SIGNED_IN, nextProps.navigation);
}
}
handleSubmit = () => {
// use that ref to get the form value
const value = this.loginForm ? this.loginForm.getValue() : null;
if (value) {
this.props.login(value.email, value.password);
}
}
onFormChange() {
const value = this.loginForm ? this.loginForm.getValue() : null;
if (value) {
this.setState({
value,
isDisabled: false,
});
}
}
render() {
const errorMessage = getErrorMessage(this.props.user);
const error = errorMessage
? <View><Text style={styles.errorMessage}>{errorMessage}</Text></View>
: null;
return (
<View style={styles.container}>
<FullScreenBGImage imageSrc={LoginBG} styles={styles.bgImage}>
<View style={styles.logo}>
<Text style={styles.logoLabel}>VERUS</Text>
</View>
<View style={styles.loginForm}>
{error}
<Form
ref={c => { this.loginForm = c; }}
type={LoginForm}
value={this.state.value}
onChange={this.onFormChange}
options={formOptions} // pass the options via props
/>
<TouchableHighlight
style={styles.button}
onPress={this.handleSubmit}
underlayColor="#99d9f4"
disabled={this.state.isDisabled}
>
<Text style={styles.buttonText}>Sign In</Text>
</TouchableHighlight>
</View>
</FullScreenBGImage>
</View>
);
}
}
export default Login;
版本
tcomb-form-native v0.6.11