首页 > 解决方案 > Anyone knows why the label of picker in react native doesn't work?

问题描述

I was trying to solve the problem by removing the item from but it seems didn't work. i wonder, am i forgot to pass something into the command?

hopefully, the screen and my code will make my explanation more briefly

Here is my code

EmployeeCreate.js

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"

             />
          </CardSection>

          <CardSection>
             <Input 
             label="Phone"
             placeholder="08122030930"

             />
          </CardSection>

          <CardSection style={{flexDirection:'column'}}>
             <Text style={styles.pickerTextStyle}>Select your shift</Text>
            <Picker
            selectedValue={this.props.shift}
            onValueChange={day => this.props.employeeUpdate ({prop:'shift' , value: day})}
            >
               <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)

;

here attached also the picture of it enter image description here

标签: react-native

解决方案


如果您要调用的函数是employeeUpdate您从 导入的./actions,那么您应该删除this.props. Else,该函数可能需要在 的父类中定义EmployeeCreate


推荐阅读