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 })
        }
    }
}

，然后像这样将其导入到屏幕组件中 loginScreen.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

我是新来的本地人，所以怎么了？在我将该功能复制粘贴到另一个文件之前，它工作得很好

Answer 1

仅setState就没有意义（而且永远都不应该起作用），因为它是一个实例函数。由于它是一个实例函数，因此也将不起作用，因为this在类实例上下文中将（大致）毫无意义。

您可以传递setState函数，但这是绝望之路。

由于此字段与username和password字段相关联，因此您应该只将一个单独的组件带入页面。

如果这不起作用，则将“验证”和“验证结果的处理方式”的关注点分开，不要将验证与验证过程的特定实现联系起来。

Answer 2

我认为您也许可以执行以下操作：

constructor(props) {
    super(props);
    this.state = {
        username: '',
        validUsername: false,
        password: '',
        validPassword: false,
    };
    this.validate = validate.bind(this);
}

...


              <Input
                onChangeText={(text) => this.validate(text,'username')}

这应该使它在validate函数内部，this绑定到您的React组件，因此this.setState()具有含义和上下文。

从另一个文件反应设置状态

2 个答案: