I don't understand how can I access to form props. I used formValueSelector as suggested the documentation, but doesn't work. Where is my mistake? I'm using the latest version of redux-form.
LoginForm.js
'use strict';
import React from 'react';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { TextInput, View, TouchableHighlight, Text } from 'react-native';
import { connect } from 'react-redux';
class LoginForm extends React.Component {
handeSubmit(email, password){ alert(`email: ${email} and password: ${password}`)};
render() {
return (
<View>
<Field
name="email"
component={TextInput}
placeholder="Email"
/>
<Field
name="password"
component={TextInput}
placeholder="Password"
secureTextEntry={true}
/>
<TouchableHighlight onPress={() => this.handeSubmit(this.props.email, this.props.password)}>
<Text>Submit</Text>
</TouchableHighlight>
</View>
);
}
}
LoginForm = reduxForm({
form: 'loginForm'
})(LoginForm);
const selector = formValueSelector('loginForm');
function mapStateToProps(state){
return {
email: selector(state, 'email'),
password: selector(state, 'password'),
}
}
LoginForm = connect(mapStateToProps)(LoginForm);
export default LoginForm;
LoginPage.js
'use strict';
import React from 'react';
import {View} from 'react-native';
import Container from '../../components/Container';
import LoginForm from '../../components/forms/LoginForm';
class LoginPage extends React.Component {
render() {
return (
<Container>
<LoginForm/>
</Container>
);
}
}
export default LoginPage;
Result:
I use alert(this.props)
onPress button and this is the output. There aren't email
and password
.
and this is the output for
<TouchableHighlight onPress={() => alert(JSON.stringify(test))}>
<Text>Submit</Text>
</TouchableHighlight>
function mapStateToProps(state){
return {
test: state.form.loginForm
}
}
I found the solution. TextInput doesn't work with redux-form as it is. It need a component than pass the redux-form props like this:
TextField.js
class TextField extends React.Component {
render(){
const { input: { value, onChange } } = this.props; <----add this!!!
return (
<TextInput
style={[styles.textInput]}
onChangeText={(value) => onChange(value)} <----add this!!!
add this!!!---> value={value} underlineColorAndroid="transparent" selectTextOnFocus={true} {...this.props}
/>
);
}
}
Instead of import TextInput inside the forms, import the custom TextField.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.