Question

我正在尝试使用React调用Open Source weather API。

但是我收到以下错误App.js:59 Uncaught TypeError: this.onSubmit is not a function

这是我的api文件：

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>

Answer 1

您已将方法handleSubmit绑定到表单onsubmit事件，您无需在this.onSubmit中包含此方法的内容。这会失败，因为您的代码中的类中未定义此方法。

顺便说一句，您在代码中绑定this上下文两次，一次在onsubmit事件中，一次在构造函数中。仅执行一次就足够了，推荐的位置在你的构造函数中。

未捕获的TypeError：this.onSubmit不是React.js中的函数

1 个答案: