javascript - 来自另一个文件的 react 设置状态

Question

我有一个要在很多屏幕中使用的功能，我不想在每个屏幕组件中复制粘贴它，所以我创建了一个新组件inputValidation.js 并将函数放在那里

export function validate(text,type) {
    emailPattern=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    if (type=='username'){
        if (emailPattern.test(text)){
            setState({ validUsername: true })
        } else {
            setState({ validUsername: false })
        }
    }
    if (type=='password'){
        if (text.length < 8){
            this.setState({ validPassword: false })
        } else {
            this.setState({ validPassword: true })
        }
    }
}

然后我像这样将它导入到我的屏幕组件中登录屏幕.js

export default class LoginScreen extends Component {
    static navigationOptions = { header: null };
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            validUsername: false,
            password: '',
            validPassword: false,
        };
    }

    render() {
        return (
            <Container style={styles.container}> 
                <View style={{ flex: 1, justifyContent: 'space-between'}}>

                    <Item style={styles.inputContainer} success={this.state.validUsername ? true : false} bordered regular>

                        <Input
                        onChangeText={(text) => validate(text,'username')}
                        autoCapitalize="none" 
                        autoCorrect={false}
                        style={styles.input} 
                        placeholder='Email' />

                        <Icon style={styles.inputIcon, !this.state.validUsername ? styles.inputIconHidden : null} type='Entypo' name='check' />

                    </Item>
                </View>

          </Container>
        )
    }
}

但我得到错误找不到变量:setState

我是 React Native 的新手，怎么了？在我将函数复制粘贴到另一个文件之前它工作得很好

Answer 1

单独使用 setState 是没有意义的(而且它永远不会起作用)，因为它是一个实例函数。因为它是一个实例函数，它也不会工作，因为 this 在类实例上下文之外将(大致)没有意义。

您可以传递 setState 函数，但这是一条通往绝望的道路。

因为这与 username 和 password 字段相关联，所以您应该只在页面中引入一个单独的组件。

如果这不起作用，则将“验证”和“如何处理验证结果”这两个问题分开，不要将验证与验证过程的特定实现联系起来。