反应访问子状态

Question

我有一个名为AvailabiltyCalender的组件，它有一个名为DatePicker的子组件。 Chile组件的状态为focusedInput 。 我需要从AvailabiltyCalender组件访问该状态并获取该状态值。 我怎样才能做到这一点。

可用性日历元素

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

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

希望对您有帮助！

Answer 2

简短的回答：您没有。

在React中，状态仅以一种方式流动。 从父组件到状态。 因此，如果您想访问子级中的某些内容，则必须将状态保留在父级组件中，并将其作为Props传递给子级。

如果子级需要更改传递给它的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>