从另一个文件绑定函数来响应类组件

Question

我已经在组件中编写了一个函数，它可以正常工作。但是，如果我将其移至另一个文件，将其导入并在构造函数中绑定到此文件，则它无法识别该类。

应该更改什么？这是代码：

主要组成部分：

import { getSaturdays, getThisAndNextYear, getMonthsOfYear, handleChange } from '../functions';

export class BookingField extends Component {
  constructor(props) {
    super(props);
    this.handleChange = handleChange.bind(this);
  }

  render() {
    return (
      <section id="booking-field">
        <form>
          <div className="booking-section">
            <label>Érkezés</label> <br />
            <div>
              <Select
                name="arrivalYear"
                className="select"
                placeholder="Select year"
                options={this.state.options.arrivals.years}
                isSearchable
                onChange={
                  data => {
                    this.handleChange(data);
                  }}
              />
              <Select
                isDisabled={!this.state.arrival.year ? true : false}
                options={this.state.options.arrivals.months}
                className="select"
                placeholder="Month"

                onChange={data => {
                  this.handleChange(data);
                  setTimeout(() => {
                    this.setState({
                      options: {
                        ...this.state.options,
                        arrivals: {
                          ...this.state.options.arrivals,
                          days: getSaturdays(this.state.arrival.year, this.state.arrival.month)
                        }
                      }
                    })
                  }, 1)
                }}
              />
              <Select
                isDisabled={!(this.state.arrival.year && this.state.arrival.month) ? true : false}
                className="select"
                placeholder="Day"
                onChange={
                  data => this.handleChange(data)
                }
                options={this.state.options.arrivals.days}
              />
            </div>
          </div>
          <div className="vertical-line"></div>
          <div className="booking-section">
            <label>Távozás</label> <br />
            <div>
              <Select
                name="departureYear"
                isDisabled
                className="select"
                placeholder={this.state.departure.year}
                options={this.state.options.arrivals.years}
                isSearchable
                onChange={
                  data => {
                    this.handleChange(data);
                  }}
              />
              <Select
                isDisabled={!this.state.arrival.year || !this.state.arrival.month ? true : false}
                options={this.state.options.departures.months}
                className="select"
                placeholder="Hónap"

                onChange={data => {
                  this.handleChange(data);
                  setTimeout(() => {
                    this.setState({
                      options: {
                        ...this.state.options,
                        departures: {
                          ...this.state.options.departures,
                          days: getSaturdays(this.state.departure.year, this.state.departure.month)
                        }
                      }
                    })
                  }, 1)
                }}
              />
              <Select
                isDisabled={!(this.state.departure.year && this.state.departure.month) ? true : false}
                className="select"
                placeholder="Nap"
                onChange={
                  data => this.handleChange(data)
                }
                options={this.state.options.departures.days}
              />
            </div>
          </div>
          <div className="vertical-line"></div>
          <div className="booking-section">
            <label>Vendégek</label> <br />
            <div>
            </div>
          </div>
        </form>
      </section>
    );
  }
}

export default BookingField;

functions.js

handleChange = (data) => {
  switch (data.name) {
    case 'arrivalYear':
      return this.setState({
        ...this.state,
        arrival: {
          ...this.state.arrival,
          year: data.value,
          month: undefined,
          day: undefined
        },
        departure: {
          ...this.state.departure,
          year: data.value
        }
      })
    case 'arrivalMonth':
      return this.setState({
        ...this.state,
        arrival: {
          ...this.state.arrival,
          month: data.value
        }
      })
    case 'arrivalDay':
      return this.setState({
        ...this.state,
        arrival: {
          ...this.state.arrival,
          day: data.value
        }
      })
    default: return
  }
}

Answer 1

You cannot bind this to an arrow function。改为将其更改为常规函数。

this