Question

我正在尝试从Parent Component中通过Click事件渲染Child Component。这是父组件。我在Parent Component中选择了开始日期和结束日期。

 handleStartDateChange = (e, date) => {
    this.setState({ startDate: date });
}
 ...
 handleFilterClick = () => {
        let urlGetCashListByDate = urlGetCashList + '?starttime=' + this.state.startDate +'&endtime=' + this.state.endDate;
        let urlGetOrderListByDate = urlGetOrderList + '?starttime=' + this.state.startDate + '&endtime=' + this.state.endDate;  
 }
 render() {
 return ( 
         <DatePicker
          id="start-date"
          onChange={this.handleStartDateChange}/>)
         <DatePicker
          id="end-date"
          hintText="End Date"
          onChange={this.handleEndDateChange}/>
         <RaisedButton
          onClick={this.handleFilterClick}/> 

         <OrderList/>
         <CashList/>        
 )}

这是Child Component：

class OrderList extends Component{
    componentDidMount(){
       this.props.getOrderList(urlGetOrderList);
}

和CashList子组件：

class CashList extends Component{
        componentDidMount(){
           this.props.getCashList(urlGetCashList);
}

如何使用像这样的父组件的新Url呈现子组件？（在CashList组件中）

this.props.getCashList(urlGetCashListByDate)

我知道passing a state，但我的问题是网址。谢谢。

Answer 1

使用相同的urlGetOrderList＆amp; urlGetCashList变量，假设它们已在某处定义（它们应对应于任一查询的基本URL）：

constructor(props) {
  super(props);

  this.state = {
    startDate: null,
    endDate: null,
    ...
    urlParams: ''
  };
}

handleStartDateChange = (e, startDate) => {
  this.setState({ startDate });
}
...
handleFilterClick = () => {
  this.setState({ urlParams: `?starttime=${this.state.startDate}&endtime=${this.state.endDate}` });
}
render() {
  return ( 
    <DatePicker
      id="start-date"
      onChange={this.handleStartDateChange} />
    <DatePicker
      id="end-date"
      hintText="End Date"
      onChange={this.handleEndDateChange} />
    <RaisedButton
      onClick={this.handleFilterClick} /> 

    <OrderList url={urlGetOrderList + this.state.urlParams} />
    <CashList url={urlGetCashList + this.state.urlParams} />        
  );
}

在OrderList组件中：

class OrderList extends Component {
  ...
  retrieveList(url) {
    this.props.getOrderList(url);
  }
  componentDidMount() {
    this.retrieveList(this.props.url);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.url !== this.props.url) {
      this.retrieveList(nextProps.url);
    }
  }
}

在CashList组件中也是如此。

如何通过Parent Component中的Click事件渲染Child Component？

1 个答案: