Привязать функцию из другого файла для реагирования компонента класса - PullRequest
Новая
       52

Привязать функцию из другого файла для реагирования компонента класса

0 голосов
/ 21 февраля 2020

Я написал функцию в компоненте, и она работает правильно. Однако, если я переместлю его в другой файл, импортирую и свяжу с ним в конструкторе, он не распознает класс.

Что следует изменить? Вот код:

Основной компонент: 

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;

функций. 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
  }
}

1 Ответ

0 голосов
/ 21 февраля 2020

Невозможно связать this с функцией стрелки . Вместо этого измените его на обычную функцию. 

function handleChange(data) {
...