Uncaught TypeError: this.onSubmit не является функцией в React.js - PullRequest
Новая
       25

Uncaught TypeError: this.onSubmit не является функцией в React.js

0 голосов
/ 12 июня 2018

Я пытаюсь позвонить в API с открытым исходным кодом погоды , используя React.

Но я получаю следующую ошибку App.js:59 Uncaught TypeError: this.onSubmit is not a function

Это мой APIfile: 

import axios from 'axios';

var key = 'TK421';
var countryCode = 'us';

export const getWeatherByZip = zipCode => {
  return axios
    .get(`http://api.openweathermap.org/data/2.5/weather?zip=${zipCode},${countryCode}&appid=${key}`)
    .then(resp => resp.data);
};

И это мой основной файл / файл приложения: 

import React, { Component } from 'react';
import * as api from '../utils/api';

import '../scss/app.scss';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zipcode: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    var zip = event.target.value;
    this.setState(function() {
      return {
        zipcode: zip,
      };
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.onSubmit(
      api.getWeatherByZip(this.state.zipcode).then(
        function(zip) {
          this.setState(function() {
            return {
              zipcode: zip,
            };
          });
        }.bind(this)
      )
    );
  }

  render() {
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit.bind(this)}>
          <h2>Open Weather App</h2>
          <div className="row">
            <div className="one-half column">
              <label htmlFor="insertMode">Insert your location</label>
              <input
                className="u-full-width"
                placeholder="please enter your zipcode"
                type="text"
                autoComplete="off"
                value={this.state.zipcode}
                onChange={this.handleChange.bind(this)}
              />
            </div>
            <div className="one-half column">
              <label htmlFor="showMin">show minimum</label>
              <input type="checkbox" />
              <label htmlFor="showMax">show maximum</label>
              <input type="checkbox" />
              <label htmlFor="showMean">show mean</label>
              <input type="checkbox" />
            </div>
          </div>
          <div className="row">
            <div className="two-half column">
              <button className="button-primary" type="submit" disabled={!this.state.zipcode}>
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

Как получить правильный ответ при вводе и отправке формы в реакции?

ОБНОВЛЕНИЕ: 

handleSubmit(event) {
    event.preventDefault();
    api.getWeatherByZip(this.state.zipcode).then(
      function(zip) {
        console.log('zip', zip);

        this.setState(function() {
          return {
            zipcode: zip,
          };
        });
      }.bind(this)
    );
  }

А у меня в JSX: 

 <div className="container">
        <form
          onSubmit={() => {
            this.handleSubmit;
          }}
        >
          <h2>Open Weather App</h2>
          <div className="row">
            <div className="one-half column">
              <label htmlFor="insertMode">Insert your location</label>
              <input
                className="u-full-width"
                placeholder="please enter your zipcode"
                type="text"
                autoComplete="off"
                value={this.state.zipcode}
                onChange={this.handleChange.bind(this)}
              />
            </div>
            <div className="one-half column">
              <label htmlFor="showMin">show minimum</label>
              <input type="checkbox" />
              <label htmlFor="showMax">show maximum</label>
              <input type="checkbox" />
              <label htmlFor="showMean">show mean</label>
              <input type="checkbox" />
            </div>
          </div>
          <div className="row">
            <div className="two-half column">
              <button className="button-primary" type="submit" disabled={!this.state.zipcode}>
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>

1 Ответ

0 голосов
/ 12 июня 2018

Вы уже связали метод handleSubmit с событием формы onsubmit, вам не нужно переносить содержимое этого метода в this.onSubmit.Это терпит неудачу, потому что этот метод не определен в классе в вашем коде.

Кстати, ваша привязка контекста this два раза в вашем коде, один раз в вашем onsubmit событии и один раз в вашемконструктор.Достаточно сделать это только один раз, и рекомендуемое место для этого находится в вашем конструкторе.

...