如何在react-native-cli中的datepicker中实现this.setstate和this.props

Question

我有一个查询，因为我已经在我的react-native组件中添加了一个datepicker，datepicker的值不会改变，但值存储在数据库中。我尝试了许多方法，但都没有成功

我需要使用this.props.date将数据保存到date变量上，并且需要使用this.setState向用户显示他选择的值，因为两者都使用onDateChange。我不知道如何实现它

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {Card, CardItem} from 'native-base';
import {Input, Button} from './common';
import {connect} from 'react-redux';
import {studentUpdation} from '../actions';
import {Picker} from '@react-native-community/picker';
import Datepicker from 'react-native-datepicker';

class StudentCreate extends Component {
  constructor(props) {
    super(props);
    this.state = {date: '2016-05-15'};
  }

  render() {
    return (
      <Card>
        <CardItem>
          <Datepicker
            value={this.props.date}
            **onDateChange={(value, date) =>
              this.props.studentUpdation(
                {prop: 'date', value},
                this.setState({date: date}),
              )
            }**
          />
        </CardItem>

        <CardItem>
          <Input
            label="name"
            placeholder="Jane"
            value={this.props.name}
            onChangeText={(value) =>
              this.props.studentUpdation({prop: 'name', value})
            }
          />
        </CardItem>
        <CardItem>
          <Input
            label="phone"
            placeholder="555-555-5555"
            value={this.props.phone}
            onChangeText={(value) =>
              this.props.studentUpdation({prop: 'phone', value})
            }
          />
        </CardItem>
        <CardItem>
          <Text style={styles.pickerTextStyke}>STD</Text>
          <Picker
            style={{flex: 1}}
            selectedValue={this.props.std}
            onValueChange={(value) =>
              this.props.studentUpdation({prop: 'std', value})
            }>
            <Picker.Item label="I" value="I" />
            <Picker.Item label="II" value="II" />
            <Picker.Item label="II" value="II" />
            <Picker.Item label="III" value="III" />
            <Picker.Item label="IV" value="IV" />
            <Picker.Item label="V" value="V" />
            <Picker.Item label="VI" value="VI" />
            <Picker.Item label="VII" value="VII" />
            <Picker.Item label="VIII" value="VIII" />
            <Picker.Item label="IX" value="IX" />
            <Picker.Item label="X" value="X" />
            <Picker.Item label="XI" value="XI" />
            <Picker.Item label="XII" value="XII" />
            <Picker.Item label="DELF" value="DELF" />
          </Picker>
        </CardItem>
        <CardItem />
        <CardItem>
          <Text style={styles.pickerTextStyke}>Bank or Cash</Text>
          <Picker
            style={{flex: 1}}
            selectedValue={this.props.bankorcash}
            onValueChange={(value) =>
              this.props.studentUpdation({prop: 'bankorcash', value})
            }>
            <Picker.Item label="Bank" value="Bank" />
            <Picker.Item label="Cash" value="Cash" />
          </Picker>
        </CardItem>
        <CardItem>
          <Input
            label="Bank Name"
            placeholder="Axis"
            value={this.props.bankname}
            onChangeText={(value) =>
              this.props.studentUpdation({prop: 'bankname', value})
            }
          />
        </CardItem>
        <CardItem>
          <Input
            label="PresentDays"
            placeholder="25"
            value={this.props.presentdays}
            onChangeText={(value) =>
              this.props.studentUpdation({prop: 'presentdays', value})
            }
          />
        </CardItem>
        <CardItem>
          <Button>Create</Button>
        </CardItem>
      </Card>
    );
  }
}

const styles = {
  pickerTextStyke: {
    fontSize: 18,
    paddingLeft: 20,
  },
};

const mapStateToProps = (state) => {
  const {
    name,
    phone,
    std,
    bankorcash,
    bankname,
    presentdays,
    date,
  } = state.studentForm;

  return {
    name,
    phone,
    std,
    bankorcash,
    bankname,
    presentdays,
    date,
  };
};

export default connect(mapStateToProps, {studentUpdation})(StudentCreate);

Answer 1

您可以在onDateChange上执行这两个操作。

<Datepicker
  value={this.props.date}
  onDateChange={(value, date) => {
    this.props.studentUpdation({ prop: 'date', value });
    this.setState({ date });
  }}
/>