我目前正在使用redux-form,immutablejs和react-native构建一个登录表单并收到此错误。不太清楚这笔交易是什么,任何提示/资源都值得赞赏!
LoginForm.js
import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';
import { Text, View, TouchableOpacity } from 'react-native';
import { EmailField, PasswordField } from './common';
const LoginForm = (props) => {
const { handleSubmit } = props;
return (
<View style={styles.container}>
<View>
<Field name="email" component={EmailField} />
</View>
<View>
<Field name="password" component={PasswordField} />
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={handleSubmit}>
<Text style={styles.button}>
Sign In
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={handleSubmit}>
<Text style={styles.button}>
Sign Up
</Text>
</TouchableOpacity>
</View>
</View>
);
};
//...
export default reduxForm({
form: 'LoginForm'
})(LoginForm);
EmailField.js
import React from 'react';
import { TextInput } from 'react-native';
const EmailField = (props) => {
const { input: { value, onChange }, ...otherProps } = props;
return (
<TextInput
placeholder="email@gmail.com"
keyboardType="email-address"
onChange={value => onChange(value)}
{...otherProps}
/>
);
};
export { EmailField };
PasswordField.js
import React from 'react';
import { TextInput } from 'react-native';
const PasswordField = (props) => {
const { input: { value, onChange }, ...otherProps } = props;
return (
<TextInput
secureTextEntry
placeholder="password"
onChange={(value) => onChange(value)}
value={value}
{...otherProps}
/>
);
};
export { PasswordField }
的package.json
"dependencies": {
"immutable": "^3.8.1",
"npm": "^4.1.1",
"react": "^15.4.2",
"react-native": "0.39.2",
"react-redux": "^5.0.2",
"redux": "^3.6.0",
"redux-form": "^6.4.3",
"redux-immutable": "^3.0.10",
},
ConnectedField.js https://github.com/erikras/redux-form/blob/e6f7ee65853996c533d497354cf5aca596e3b304/src/ConnectedField.js
render() {
const {
component,
withRef,
name,
// remove props that are part of redux internals:
_reduxForm, // eslint-disable-line no-unused-vars
normalize, // eslint-disable-line no-unused-vars
onBlur, // eslint-disable-line no-unused-vars
onChange, // eslint-disable-line no-unused-vars
onFocus, // eslint-disable-line no-unused-vars
onDragStart, // eslint-disable-line no-unused-vars
onDrop, // eslint-disable-line no-unused-vars
...rest
} = this.props
const { custom, ...props } = createFieldProps({ getIn, toJS },
name,
{
...rest,
form: _reduxForm.form,
onBlur: this.handleBlur,
onChange: this.handleChange,
onDrop: this.handleDrop,
onDragStart: this.handleDragStart,
onFocus: this.handleFocus
}
)
if (withRef) {
custom.ref = 'renderedComponent'
}
if (typeof component === 'string') {
const { input, meta } = props // eslint-disable-line no-unused-vars
// flatten input into other props
return createElement(component, { ...input, ...custom })
} else {
return createElement(component, { ...props, ...custom })
}
}
}
ConnectedField.propTypes = {
component: PropTypes.oneOfType([ PropTypes.func, PropTypes.string ]).isRequired,
props: PropTypes.object
}