时间戳

首页 > 解决方案 > 将状态从一个组件传递到另一个组件

reactjs - 将状态从一个组件传递到另一个组件

问题描述

我正在尝试将日期状态从“Avaibalities.js”传递到“Modal.js”。在我的日历中单击 2 个日期时会显示我的日期。我非常想做的是当我验证我的选择（日期）时，我希望我的日期也出现在我的模态组件上。

可用性.js

    class Avaibalities extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          date: new Date(),
          showDate: null,
          showModal: false
        };
      }
      onChange = date => {
        this.setState({
          date,
          showDate: true
        })
    
      };
    
      validation = () => {
        if (this.state.showDate) {
          this.setState({
            showDate: true,
            showModal: true
          });
        } else {
          alert('Please enter a valid date')
        }
      };
    
      reset = () => {
        this.setState({
          showDate: null
        })
      };
      dateToggle = date => {
        this.setState({
          date,
          showDate: true
        });
      }

/* render method with few jsx (I took some to not make my question too big, only keep the important)*/

<button className={'button'} onClick={this.validation}>Validate</button>

    {this.state.showDate
                    &&
                    <p>
                      From : {this.state.date[0].toLocaleDateString()} to :{' '}
                      {this.state.date[1].toLocaleDateString()}
                    </p>
                  }
 /*The dates are showed without problem below on my Avaibalities page */

    
    <h4>Please choose 2 dates and validate</h4>
    
    {this.state.showModal && <Modal toggle={this.togglePop} dateInModal={this.dateToggle} />}
    
/* Once a validate, my modal is showed*/

这是我被阻止的部分，我在条件方法中为调用 Modal 命名，并尝试将该数据传递到我的 Modal 组件中。

     Modal.js
        
        handleModal = () => {
            this.props.dateToggle();
          }
        
        <div><p>Your dates : {this.dateToggle}</p></div>

我希望我足够具体。

此致

标签： reactjs

解决方案

如果您想将整个状态传递给Modal

{this.state.showModal && <Modal state={this.state} toggle={this.togglePop} dateInModal={this.dateToggle} />}

在这种情况下，我们传入一个名为的新道具state，您将state向下传递给您的Modal组件。

如果您只想通过日期

 {this.state.showModal && <Modal date={this.state.data} toggle={this.togglePop} dateInModal={this.dateToggle} />}

如果你想更具体，你甚至可以做someRandomVariable = { state.date}

然后在您的Modal组件中，当您调用this.prop.state或this.prop.someRandomVariable

推荐阅读