Question

我是新手，对本地人做出反应，已经这样做了一个星期左右。我刚刚完成了制作交互式按钮的教程并对其进行了处理。但我坚持这个。该应用程序现在非常简单，只是尝试制作表单并使用 onPress 添加一些触发事件。

以下是我的代码部分。我只是因为没有在onPress事件上调用 SubmitThisForm（） 而遗失的话。

你能帮助我吗？

非常感谢。

import React, { Component } from 'react';
import {Container, Content, InputGroup,Button, View, Icon, Card, 
CardItem, Text, Body} from 'native-base';

import {Input} from './common';

 class LoginForm extends Component {
 state = {email: '', password: ''};
 SubmitThisForm() {
  console.log("Can you see this");
 }
render () {
 return (
  <Container>
    <Content>
      <Card style={styles.FormContainer}>
        <CardItem>
          <Body>
            <InputGroup borderType="regular">
              <Icon name="ios-mail-outline" style={{color:'#384850'}}/>
              <Input
                placeHolder="example@example.com"
                value = {this.state.email}
                onChangeText={email=>this.setState( { email })}
              />
            </InputGroup>

            <InputGroup borderType="regular">

              <Icon name="lock" style={{color:'#384850'}}/>
              <Input
                secureTextEntry= {true}
                placeHolder="password"
                value = {this.state.password}
                onChangeText={password=>this.setState( { password })}
              />
            </InputGroup>

          </Body>
        </CardItem>
      </Card>
      <View style={styles.SignIn}>
        <Button block warning onPress={ () => {this.SubmitThisForm()}}><Text>Sign In</Text></Button>
      </View>

      <View style={styles.SignUp}>
        <Button block info><Text>Sign Up</Text></Button>
      </View>
      <View style={styles.SignIn}>
        <Button block primary><Text>Forgot Password</Text></Button>
      </View>
    </Content>

  </Container>
  );
  };
  }

  const styles = {
  ErrorTextStyle: {
fontSize: 20,
alignSelf: 'center',
color: 'red'
},
FormContainer:{
marginTop:30,
shadowColor:'#000',
shadowOffset:{width:0,height:2},
shadowOpacity:0.1,
shadowRadius:2,
},
SignIn:{

marginTop:10,
flex:1,
alignSelf:'stretch',
},
SignUp:{

marginTop:40,
flex:1,
alignSelf:'stretch',
}
}

export default LoginForm

include输入组件如下：

import React from 'react';
import {Text, View, TextInput} from 'react-native';

const Input = ({ label,value,onChangeText,placeHolder,secureTextEntry }) => {

 const {InputStyle,LabelStyle,ContainerStyle } = styles;
 return (
 <View style = {ContainerStyle}>
  <TextInput
    secureTextEntry = {secureTextEntry}
    placeholder={placeHolder}
    autoCorrect={false}
    style = {InputStyle}
    value={value}
    onChangeText={onChangeText}
  />
</View>
  );
 };

 const styles = {
 InputStyle:{
color:'#000',
paddingRight:5,
paddingLeft:5,
fontSize:18,
lineHeight:30,
flex:2,
height:40
},
LabelStyle:{
fontSize:18,
paddingLeft:20,
flex:1,
},
ContainerStyle:{
height:40,
flex:1,
flexDirection:'row',
alignItems:'center'
}
}

 export { Input };

Answer 1

您需要使用箭头功能，或bind() SubmitThisForm到您的组件。

您可以将方法声明为：

SubmitThisForm = () => { console.log('Can you see this?') }
或者，您可以bind()添加以下内容constructor {/ 1}}

constructor() { super() this.SubmitThisForm = this.SubmitThisForm.bind(this) }

如果您未在自定义函数中绑定this，则this将等于undefined。但是，当您使用箭头函数时，this是词法范围的，这意味着this的上下文将是封闭的上下文（LoginForm）

React Native OnPress问题我一直有

1 个答案: