Question

我有一个名为DatePickerComponent.js的组件

import React, { Component } from 'react';
import {DatePicker} from 'native-base';

export default class DatePickerComponent extends Component {
constructor(props) {
        super(props);
        this.state = { chosenDate: new Date() };
        this.setDate = this.setDate.bind(this);
    }
        render() {
        return (
         <DatePicker
          defaultDate={new Date()}
          minimumDate={new Date()}
          onDateChange={this.setDate} />)
        }
}

我在Parent.js组件中导入了DatePicker组件，并且还需要在DatePicker组件中更改值。我怎样才能使用道具获得价值？

import React, {Component} from 'react';
import DatePickerComponent from '../../components/DatePicker';

export default class Parent extends Component {
  constructor(props) {
        super(props);

    }
 
     render() {return (<DatePickerComponent/>)}

}

Answer 1

您需要从父组件传递dateChangeHandler函数作为道具。

import React, {Component} from 'react';
import DatePickerComponent from '../../components/DatePicker';

export default class Parent extends Component {
  constructor(props) {
        super(props);
    }

    handleDateChanges(date){
       console.log(date);
    }

 
     render() {
      return (
        <DatePickerComponent
          onDateChange={this.handleDateChange}
        />
      )
     }

}

DatePicker有一个onDateChange事件，它在争论中提供了date，因此子组件可以更新为：

import React, { Component } from 'react';
import {DatePicker} from 'native-base';

export default class DatePickerComponent extends Component {
constructor(props) {
        super(props);
        this.state = { chosenDate: new Date() };
        // this.setDate = this.props.onDateChange.bind(this);
    }

     handleDateChange(date){
         this.props.onDateChange(date);
    }
        render() {
        return (
         <DatePicker
          defaultDate={new Date()}
          minimumDate={new Date()}
          onDateChange={(date) => this.handleDateChange(date)}
         />
        )
        }
}

Answer 2

对我来说，它的工作原理是这样的：

import React, { Component } from 'react';
import {DatePicker} from 'native-base';

export default class DatePickerComponent extends Component {
constructor(props) {
        super(props);
        this.state = { 
           chosenDate: new Date() 
        };
        this.handleDateChange = this.handleDateChange.bind(this);
    }
    handleDateChange = (itemValue, itemIndex) => {
      //send state to parent if needed  
      this.props.handleDate(itemValue);
      this.setState({chosenDate: itemValue})
    }
        render() {
          return (
            <DatePicker
            date={this.state.chosenDate}
            //defaultDate={new Date()}
            //minimumDate={new Date()}
            onDateChange={this.handleDateChange}
          />
         )
        }
}

父项

import React, {Component} from 'react';
import DatePickerComponent from '../../components/DatePicker';

export default class Parent extends Component {
  constructor(props) {
        super(props);
       this.state = {
      date: new Date(),
    }
    handleDate = (itemValue) => {
      this.setState({date: itemValue});
    }
   }
     render() {
        return (
          <DatePickerComponent
             handleDate={this.handleDate}
          />
    )}
}

在组件之间传递props

2 个答案: