时间戳

首页 > 解决方案 > TouchableHighlight 未被禁用

react-native - TouchableHighlight 未被禁用

问题描述

如果表单无效，将禁用属性设置为TouchableHighlightto{!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());
  }

谢谢， 菲拉斯

标签： react-native

解决方案

第一个问题 是你如何setState在你的组件上......setState函数采用object你新更改的字段。

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

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

onBlur = () => {
this.validate(...);

const isValid = this.isFormValid();
this.setState({ isValid: isValid });
};

建议

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

推荐阅读