<Fumi
label={'请输入您的用户名/手机号'}
iconClass={FontAwesomeIcon}
iconName={'user-circle-o'}
iconColor={'#4EADEF'}
iconSize={30}
iconWidth={60}
onChangeText={this.handleChangeUserMessage}
value={this.state.userInfo}
inputPadding={27}
style={{ fontWeight: 0, width: deviceWidthDp * 0.8, backgroundColor: 'rgba(0,0,0,0)', borderBottomWidth: 1, borderBottomColor: '#606367' }}
/>
onChangeText={this.handleChangeUserMessage}
handleChangeUserMessage() {
console.log('=========',this);
}
总结:当前this指向当前组件。
思考:如何去指向当前组件并拿到当前组件的state和props呢?
等价思考:那只要把当前组件的this指针传给input这个组件呢即可。
解决:
import React, { Component } from 'react';
import {
View,
ImageBackground,
Text,
StyleSheet,
} from 'react-native';
import NavigationManager from '../../../navigation/NavigationManager';
import { TouchableOpacity, TextInput } from 'react-native-gesture-handler';
import ConfirmModal from '../../../common/ConfirmModal';
import { getLoginInfo, authenticationRole } from '../../../action/login/index';
import { connect } from 'react-redux';
import images from '../../../assert/image.js';
import { deviceHeightDp, deviceWidthDp } from '../../../utils/Fit';
import EvilIcons from 'react-native-vector-icons/EvilIcons';
import { fitSize } from '../../../utils/Fit';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Fumi } from 'react-native-textinput-effects';
import Toast from 'react-native-easy-toast';
import {LoadingControl} from '../../../common/LoadingView';
class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
userInfo: '',
password: '',
getLoginMessage: '',
isShowConfirmModal: false,
};
}
catchLoginFailure() {
this.setState({
isShowConfirmModal: true
})
}
gotoWorkerPage() {
NavigationManager.goPage('WorkerPage');
}
gotoDirectorPage() {
NavigationManager.goPage('DirectorPage');
}
login() {
const { getLoginInfo } = this.props;
const isAjax = true;
const { userInfo, password } = this.state;
if(!userInfo || !password){//校验表单数据是否有值
const result = "账号和密码均不能为空";
this.toast.show(result);
return false;
}
LoadingControl.show();
getLoginInfo(userInfo, password, isAjax);
}
onCloseConfirmModal() {
this.setState({
isShowConfirmModal: false
});
}
showConfirmModal() {
this.setState({
isShowConfirmModal: true,
});
}
gotoResetPassword() {
NavigationManager.goPage('AuthPage');
}
handleChangeUserMessage() {
console.log('=========',this);
}
render() {
const { isShowConfirmModal, } = this.state;
const confirmModal = (<ConfirmModal
visible={true}
onClose={() => this.onCloseConfirmModal()}
notice={'账号或密码错误'}
callbackConfirm={() => this.onCloseConfirmModal()}
/>);
return (
<View style={styles.containt}>
<ImageBackground style={styles.login_background} source={images.login_background} >
<View style={styles.head_sculpture} >
<EvilIcons
name={"user"}
size={fitSize(150)}
style={{ color: 'white', }}
/>
</View>
<Fumi
label={'请输入您的用户名/手机号'}
iconClass={FontAwesomeIcon}
iconName={'user-circle-o'}
iconColor={'#4EADEF'}
iconSize={30}
iconWidth={60}
onChangeText={this.handleChangeUserMessage.bind(this)}
value={this.state.userInfo}
inputPadding={27}
style={{ fontWeight: 0, width: deviceWidthDp * 0.8, backgroundColor: 'rgba(0,0,0,0)', borderBottomWidth: 1, borderBottomColor: '#606367' }}
/>
<Fumi
secureTextEntry
label={'请输入密码'}
iconClass={FontAwesomeIcon}
iconName={'key'}
iconColor={'#4EADEF'}
iconSize={30}
iconWidth={60}
inputPadding={27}
onChangeText={(password) => this.setState({ password })}
value={this.state.password}
style={{ width: deviceWidthDp * 0.8, marginTop: 15, backgroundColor: 'rgba(0,0,0,0)', borderBottomWidth: 1, borderBottomColor: '#606367' }}
/>
<TouchableOpacity
style={styles.loginButton}
onPress={() => (this.login())}
>
<Text style={{ fontSize: 25, color: 'white', }}>登录</Text>
</TouchableOpacity>
{/* <TouchableOpacity
onPress={() => this.gotoResetPassword()}
style={{ flexDirection: "row", justifyContent: 'center', alignItems: 'center', marginTop: 30 }}
>
<Text style={{ marginTop: 20, color: '#4EADEF', textDecorationLine: 'underline' }}>
忘记密码?
</Text>
</TouchableOpacity> */}
{isShowConfirmModal ? confirmModal : null}
<Toast
ref={(toast) => (this.toast = toast)}
position={'center'}
/>
</ImageBackground>
</View >
);
}
}
const styles = StyleSheet.create({
containt: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
head_sculpture: {
alignItems: 'center',
justifyContent: 'center',
marginTop: 50,
marginBottom: 50
},
inputStyles: {
color: 'red',
width: deviceWidthDp * 0.8,
height: 50,
borderBottomColor: '#606367',
borderBottomWidth: 1,
fontSize: 20,
position: "relative"
},
input_icon: {
position: "absolute",
width: 30,
height: 30,
},
loginButton: {
height: 55,
width: deviceWidthDp * 0.8,
backgroundColor: '#40BD40',
flexDirection: 'row',
alignItems: 'center',
borderRadius: 5,
fontSize: 20,
justifyContent: 'center',
marginTop: 80
},
login_background: {
width: deviceWidthDp,
height: deviceHeightDp,
alignItems: 'center',
},
})
const mapState = (state) =>({
loginStatus: state.login.loginStatus,
})
const mapDispatchToProps = (dispatch) => ({
getLoginInfo(userInfo, password, isAjax) {
dispatch(getLoginInfo(userInfo, password, isAjax));
},
authenticationRole(userId, token) {
dispatch(authenticationRole(userId, token));
},
})
export default connect(mapState, mapDispatchToProps)(LoginView);
handleChangeUserMessage() {
console.log('=========',this);
}
state负责存储组件的数据
jsx里面想要传入变量或者一些表达式需要用{}去包裹这个表达式.同时要记得对函数的作用域的变更,绑定当前组件的this.
要改变state里面的数据,需要用函数的形式去更改。this.setState({inputVale:value})这个方法
还有种方式就是直接用箭头函数,因为箭头函数是没有this的,箭头函数中的this指向的就是包裹他的函数。