未禁用TouchableHighlight

Question

如果表单无效，将TouchableHighlight的禁用属性设置为{!isFormValid()}不会禁用它。

我为此使用react-native-form-validator：

下面是代码段：

<TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} 
                        onPress={this._onSubmit}
                        disabled={!this.state.isValid}>
      <Text style={styles.loginText}>Login</Text>
</TouchableHighlight>

_isValid函数如下：

 export default class LoginScreen extends ValidationComponent {
  constructor(props) {
    super(props);

    this.state = {
      isValid: false,
      email   : '',
      password: '',
    }
  }

  _isValid = () => {
    this.setState(this.isValid,this.isFormValid());
  }

谢谢， 菲拉斯

Answer 1

第一期 setState在组件上的方式... setState函数将object的新更改的字段。

 _isValid = () => {
    const isValid = this.isFormValid();
    this.setState({ isValid: isValid }); // < Look at this
  }

第二期 为了获得按钮状态的立即更新（已禁用），您需要在每个textInput字段的onBlur事件上执行this.validate(...)，并相应地更改表单的状态……调用{{1 }}将强制重新渲染组件，因此setState按钮的状态将相应更新。

TouchableHighlight

建议

我建议使用redux-form或formik更好地处理 Field-Level-Validation 或 Blur-Validation