Question

此问题与this SO帖子有关。

我在一个班级<select onChange={this.groupBySelector}>中有两个事件处理程序（<DateSelector dateOnSelect={this.urlProducer}/>和QuarterToDate）。
在上面提到的类中，为用户提供了两个功能，即选择选项和日期选择器。这两个事件都会触发this.setState()。但是，该组件仅在其中一个中重新呈现，即<select onChange={this.groupBySelector}>。我该怎么办？

QuarterToDate类：

import React, { Component } from 'react';
import '../App.css';
import DisplayInvoice from './displayInvoice';
import DisplayCustomer from './displayCustomer';
import DisplayMonth from './displayMonth';
import DateSelector from './dateSelector';

var axios = require('axios');

class QuarterToDate extends Component {

  constructor(props){
    super(props);
    this.state = {
      data:null,
      invoiceType:'invoice',
      urlInvoices:'',
      urlCustomer:'',
      isDateSet:false
    }
    //console.log(this.props.location.state.token);
     this.groupBySelector = this.groupBySelector.bind(this);
  }

  groupBySelector(event){
    if ((event.target.value)==="invoice"){
      this.setState({invoiceType:'invoice'})
    } else if ((event.target.value)==="customer") {
      this.setState({invoiceType:'customer'})
    } else if ((event.target.value)==="month") {
      this.setState({invoiceType:'month'})
    } else {
      this.setState({invoiceType:'invoice'})
    }
  }

  urlProducer = (date) => {
    this.setState({
      urlInvoices: ("http://localhost:3000/api/invoices"+date),
      urlCustomer: ("http://localhost:3000/api/invoices"+date+"&group-by=customerNumber"),
      isDateSet: true
    }, () => {console.log(this.state.urlCustomer);});
  }

  render() {
    return (
      //<DateSelector />
      <div>
      <DateSelector dateOnSelect={this.urlProducer}/>
      <select onChange={this.groupBySelector}>
        <option value="invoice">GROUP BY INVOICE</option>
        <option value="customer">GROUP BY CUSTOMER</option>
        <option value="month">GROUP BY MONTH</option>
      </select>
        <GroupBy token={this.props.location.state.token} invoiceType={this.state.invoiceType} isDateSet={this.state.isDateSet} urlInvoices={this.state.urlInvoices} urlCustomer={this.state.urlCustomer}/>
      </div>
    );
  }
}

export default QuarterToDate;

function GroupBy(props) {
  if (props.invoiceType=='invoice') {
    return <DisplayInvoice token={props.token} url={(props.isDateSet) ? (props.urlInvoices) : "http://localhost:3000/api/quartertodate"}/>;
  } else if (props.invoiceType=='customer') {
    console.log(props.isDateSet);
    return <DisplayCustomer token={props.token} url={(props.isDateSet) ? (props.urlCustomer) : "http://localhost:3000/api/quartertodate?group-by=customerNumber"}/>;
  } else if (props.invoiceType=='month') {
    return <DisplayMonth token={props.token}/>;
  }
}

DateSelector组件的代码：

import React, { Component } from 'react';
import '../App.css';
import Moment from 'moment';

class DateSelector extends Component {

  constructor(props){
    super(props);
    this.state = {
      startDate:"",
      endDate:""
    }
  }

  dateHandler = (event) => {
    this.props.dateOnSelect("?startDate="+Moment(this.state.startDate).format('YYYY/MM/DD')
    +"&endDate="+Moment(this.state.endDate).format('YYYY/MM/DD'));
  }

  startDateOnChange = (event) => {
    this.setState({startDate: event.target.value});
  }

  endDateOnChange = (event) => {
    this.setState({endDate: event.target.value});
  }

  render() {
    return (
      <div>
        START DATE<input type="date" id="startDate" value={this.state.startDate} onChange={this.startDateOnChange}/>
        END DATE<input type="date" id="endDate" value={this.state.endDate} onChange={this.endDateOnChange}/>
        <button type="submit" onClick={this.dateHandler}>Submit</button>
      </div>
    );
  }
}

export default DateSelector;

Answer 1

尝试这样做

urlProducer = (date) => {
    const invoice = `http://localhost:3000/api/invoices${date}`
    const cust= `http://localhost:3000/api/invoices${date}&group-
                         by=customerNumber`;
    this.setState({
      urlInvoices: invoice,
      urlCustomer: cust,
      isDateSet: true
    });
    this.forceUpdate()
  }

这有用吗？

如何从两个不同的输入事件渲染组件（立即）？

1 个答案: