我正在学习 React Native,但我被困在一个 Picker 问题上。单击它时会显示,但我无法选择"星期一"以外的任何其他内容。每当我这样做时,我都会收到一个错误
我尝试在互联网上搜索问题并与我的动作创作者合作,但似乎没有任何效果
import React, { Component } from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { employeeUpdate } from '../actions';
import { Card, CardSection, Input, Button } from './common';
class EmployeeCreate extends Component {
render() {
return (
<Card>
<CardSection>
<Input
label='Name'
placeholder='Jane'
value={this.props.name}
onChangeText={value => this.props.employeeUpdate({ prop: 'name', value })}
/>
</CardSection>
<CardSection>
<Input
label='Phone'
placeholder='555-555-5555'
value={this.props.phone}
onChangeText={value => this.props.employeeUpdate({ prop: 'phone', value })}
/>
</CardSection>
<CardSection style={{ flexDirection: 'column' }}>
<Text style={styles.pickerTextStyle}>Shift</Text>
<Picker
style={{ alignItems: "center" }}
selectedValue={this.props.shift}
onValueChange={value => this.props.employeeUpdate({ prop: 'shift', value })}
>
<Picker.Item label="Monday" value="Monday" />
<Picker.Item label="Tuesday" value="Tuesday" />
<Picker.Item label="Wednesday" value="Wednesday" />
<Picker.Item label="Thursday" value="Thursday" />
<Picker.Item label="Friday" value="Friday" />
<Picker.Item label="Saturday" value="Saturday" />
<Picker.Item label="Sunday" value="Sunday" />
</Picker>
</CardSection>
<CardSection>
<Button>Create</Button>
</CardSection>
</Card>
);
}
}
const styles = {
pickerTextStyle: {
fontSize: 18,
paddingLeft: 20
}
};
const mapStateToProps = (state) => {
const { name, phone, shift } = state.employeeForm;
return { name, phone, shift };
};
export default connect(mapStateToProps, { employeeUpdate })(EmployeeCreate);
这是我的员工行动文件:
import EMPLOYEE_UPDATE from './types'
export const employeeUpdate = ({ prop, value }) => {
return {
type: EMPLOYEE_UPDATE,
payload: { prop, value }
};
};
以下是EmployeeFormReducer:
import EMPLOYEE_UPDATE from '../actions/types';
const INITIAL_STATE = { name: '', phone: '', shift: '' };
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMPLOYEE_UPDATE:
//action.payload === { prop: 'name', value: 'jane' }
return { ...state, [action.payload.prop]: action.payload.value };
default:
return state;
}
}
我希望根据我的选择选择任何一天
已解决。对类型.js文件进行了一些更改:
export const EMAIL_CHANGED = 'email_changed';
export const PASSWORD_CHANGED = 'password_changed';
export const LOGIN_USER_SUCCESS = 'login_user_success';
export const LOGIN_USER_FAIL = 'login_user_fail';
export const LOGIN_USER = 'login_user';
export const EMPLOYEE_UPDATE = 'employee_update';
export default {
EMAIL_CHANGED,
PASSWORD_CHANGED,
LOGIN_USER_SUCCESS,
LOGIN_USER_FAIL,
LOGIN_USER,
EMPLOYEE_UPDATE
}