反应访问子状态

Question

我有一个名为AvailabiltyCalender的组件，还有一个子组件名为DatePicker。智利组件有一个名为focusedInput的状态。我需要从AvailabiltyCalendar组件访问该状态并获取该状态值。我该怎么做呢。

可用压路机组件

import React, { Component } from 'react';
import './AvailabilityCalender.css';
import backArrow from '../../../assets/images/back.png';

import DatePicker from '../../Common/DatePicker/DatePicker';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from "prop-types";

import moment from 'moment';

class AvailabiltyCalender extends Component {
    componentWillReceiveProps(nextProps) {
    }

    render() {

        const { checkInOutDates: { checkInDate, checkOutDate } } = this.props;

        let checkIn = checkInDate.format('ddd DD MMM');
        let checkOut = checkOutDate.format('ddd DD MMM');

        return (
            <div className="full_width checkin_checkout_wr">
                <DatePicker />
            </div>
        );
    }
}

AvailabiltyCalender.propTypes = {
    checkInOutDates: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {

    const dates = state.searchPageReducer.checkInOutDates;

    const checkDates = {
        checkInDate: moment(dates.checkInDate),
        checkOutDate: moment(dates.checkOutDate)
    }

    return {
        checkInOutDates: checkDates,
    };
}

export default connect(mapStateToProps)(AvailabiltyCalender);

DatePicker组件

import React, {Component} from 'react';
import 'react-dates/initialize';
import {DateRangePicker, SingleDatePicker, DayPickerRangeController} from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
import './DatePicker.css';
import moment from "moment";

import {connect} from "react-redux";
import PropTypes from "prop-types";
import {bindActionCreators} from "redux";
import * as searchPageActions from "../../../pages/Search/searchPageActions";



class DatePicker extends Component
{
    constructor(props)
    {
        super(props);

    let check_in = moment(this.props.checkInOutDates.checkInDate);
    let check_out = moment(this.props.checkInOutDates.checkOutDate);

    this.state = {
        startDate: check_in,
        endDate: check_out,
    };

    this.onDatesChange = this.onDatesChange.bind(this);
}

onDatesChange({ startDate, endDate }) {
    this.setState({ startDate, endDate });
    this.props.actions.retrieveCalendarResults({
        checkInDate: startDate,
        checkOutDate: endDate,
    });


        // if(this.state.focusedInput === 'endDate'){

        // }


}

render()
{
    const { focusedInput } = this.state;

    const { checkInOutDates: { checkInDate, checkOutDate} } = this.props

    return (
        <div className="DateRangePickerInput DateRangePickerIcon">
            <DateRangePicker
                    startDate={checkInDate} 
                    startDateId="checkin_date_id" 
                    endDate={checkOutDate}
                    endDateId="checkout_date_id"
                    onDatesChange={({ startDate, endDate }) => this.onDatesChange({ startDate, endDate }) }
                    focusedInput={this.state.focusedInput}
                    onFocusChange={focusedInput => this.setState({focusedInput}) }
                    orientation="vertical" withFullScreenPortal
                    startDatePlaceholderText="Checkin"
                    endDatePlaceholderText="Checkout"

            />
        </div>
    );

}
}

DatePicker.propTypes = {
    checkInOutDates: PropTypes.object.isRequired
};


function mapStateToProps(state, ownProps)
{
    const dates = state.searchPageReducer.checkInOutDates;

    const checkDates = {
        checkInDate: moment(dates.checkInDate),
        checkOutDate: moment(dates.checkOutDate)
    }

    return {
        checkInOutDates: checkDates
    };
}

function mapDispatchToProps(dispatch)
{
    return {
        actions: bindActionCreators(searchPageActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(DatePicker);

Answer 1

简单回答：你没有。

在React中，状态仅单向流动。从父组件到状态。因此，如果您想访问子组件中的某些内容，则必须将状态保留在父组件中，并将其作为道具传递给子组件。

如果子组件需要更改传递给它的Prop，它可以从父组件调用要作为prop传递的函数。

您可以在这里阅读有关模式的信息。

class Child extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillReceiveProps(nextProps) {
    //Perform any computations you want to perform with new prop here
  }
  render() {
    const {value, toggle} = this.props;
    return (
      <div class="child">
        <span>Child: {value.toString()} </span>
        <button onClick={toggle}>Toggle in Child</button>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: true
    };
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState((prevState)=>{
      return {
        value: !prevState.value
      }
    });
  }
  render() {
    return (
      <div>
        <Child value={this.state.value} toggle={this.toggle} />
        <button onClick={this.toggle}>Toggle</button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

正如这里提到的：https://stackoverflow.com/a/46633043/8489245 ? 您可以通过在子对象中触发的事件获取子对象状态，并通过回调在父对象中侦听它！

希望它能帮助你！