blocks|key|3939105|text|你可以将表单移动到你的app类中，在组件之间传递表单数据在react中工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3939106|class+App+extends+Component+{
++getWeatherData+=+(event)+=>+{
++++const+userInput+=+{
+++++++++++++event.target.city.value,
+++++++++++++event.target.country.value
+++++++}
++++event.preventDefault();
++++axios({
++++++url:+"http://openweathermap.org/data/2.5/weather/",
++++++method:+"GET",
++++++dataType:+"json",
++++++data:+{
++++++++q:+userInput,
++++++++API_KEY:+"d108038ec889cfe762230283abaa7c7b"
++++++}
++++}).then(res+=>+{
++++++console.log(res);
++++++this.setState({});
++++});


++render()+{
++++return+(
++++++<div>
++++++++<form+onSubmit={this.getWeatherData}>
++++++++++<input+type="text"+name="city"+placeholder="City..."+/>
++++++++++<input+type="text"+name="country"+placeholder="Country"+/>
++++++++++<button>Get+Weather</button>

++++++++</form>
++++++</div>
++++);
++}
}|code-block|syntax|javascript|3939107|您也不需要将事件指定为可以通过使用userInput关键字访问值来在函数中设置的参数。|3939108|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can just move your form to your app class, passing up form data between components doenst work perfectly in react. </p>

<pre><code>class App extends Component {
  getWeatherData = (event) =&gt; {
    const userInput = {
             event.target.city.value,
             event.target.country.value
       }
    event.preventDefault();
    axios({
      url: "http://openweathermap.org/data/2.5/weather/",
      method: "GET",
      dataType: "json",
      data: {
        q: userInput,
        API_KEY: "d108038ec889cfe762230283abaa7c7b"
      }
    }).then(res =&gt; {
      console.log(res);
      this.setState({});
    });


  render() {
    return (
      &lt;div&gt;
        &lt;form onSubmit={this.getWeatherData}&gt;
          &lt;input type="text" name="city" placeholder="City..." /&gt;
          &lt;input type="text" name="country" placeholder="Country" /&gt;
          &lt;button&gt;Get Weather&lt;/button&gt;

        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>You also dont need to specify the userInput as a parameter you can set inside your function by accessing the values with the event keyword. </p>


blocks|key|3942706|text|使用类组件，我会这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3942707|(每个类/函数应该拆分到不同的文件中)|3942708|/**
+*+This+is+just+a+helper+to+encapsulate+the+weather+fetching+logic
+*/
function+getWeatherFromInput({+city,+country+})+{
++++const+query+=+`${city},${country}`;

++++return+axios({
++++++++method:+'GET',
++++++++url:+`http://openweathermap.org/data/2.5/weather?${query}`,
++++++++responseType:+'json'
++++});
}

/**
+*+Here+is+the+specific+form
+*/
export+class+WeatherForm+extends+React.Component+{
++++constructor(props)+{
++++++++super(props);
++++++++this.state+=+{
++++++++++++city:+'',
++++++++++++country:+''
++++++++};
++++}

++++handleSubmit+=+(event)+=>+{
++++++++event.preventDefault();
++++++++this.props.onSubmit(this.state);
++++};

++++handleInputChange+=+(event)+=>+{
++++++++const+{+name,+value+}+=+event.target;
++++++++this.setState({+[name]:+value+});
++++};

++++render()+{
++++++++const+{+city,+country+}+=+this.state;
++++++++return+(
++++++++++++<form+onSubmit={this.handleSubmit}>
++++++++++++++++<input
++++++++++++++++++++type='text'
++++++++++++++++++++name='city'
++++++++++++++++++++value={city}
++++++++++++++++++++onChange={this.handleInputChange}
++++++++++++++++++++placeholder='City...'
++++++++++++++++/>
++++++++++++++++<input
++++++++++++++++++++type='text'
++++++++++++++++++++name='country'
++++++++++++++++++++value={country}
++++++++++++++++++++onChange={this.handleInputChange}
++++++++++++++++++++placeholder='Country'
++++++++++++++++/>
++++++++++++++++<button+type='submit'>Get+weather</button>
++++++++++++</form>
++++++++);
++++}
}

/**
+*+And+how+you+use+it+in+your+App
+*/
export+class+App+extends+React.Component+{
++++constructor()+{
++++++++this.state+=+{
++++++++++++weather:+{}
++++++++};
++++}

++++/**
+++++*+The+userInput+is+provided+by+the+WeatherForm
+++++*/
++++handleSubmit+=+(userInput)+=>+{
++++++++getWeatherFromInput(userInput).then((response)+=>+{
++++++++++++this.setState({+weather:+response.data+});
++++++++});
++++};

++++render()+{
++++++++return+<WeatherForm+onSubmit={handleSubmit}+/>;
++++}
}|code-block|syntax|javascript|3942709|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Using class components, I would do something like this :<br>
(each class/function should be split in a different file)</p>

<pre><code>/**
 * This is just a helper to encapsulate the weather fetching logic
 */
function getWeatherFromInput({ city, country }) {
    const query = `${city},${country}`;

    return axios({
        method: 'GET',
        url: `http://openweathermap.org/data/2.5/weather?${query}`,
        responseType: 'json'
    });
}

/**
 * Here is the specific form
 */
export class WeatherForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            city: '',
            country: ''
        };
    }

    handleSubmit = (event) =&gt; {
        event.preventDefault();
        this.props.onSubmit(this.state);
    };

    handleInputChange = (event) =&gt; {
        const { name, value } = event.target;
        this.setState({ [name]: value });
    };

    render() {
        const { city, country } = this.state;
        return (
            &lt;form onSubmit={this.handleSubmit}&gt;
                &lt;input
                    type='text'
                    name='city'
                    value={city}
                    onChange={this.handleInputChange}
                    placeholder='City...'
                /&gt;
                &lt;input
                    type='text'
                    name='country'
                    value={country}
                    onChange={this.handleInputChange}
                    placeholder='Country'
                /&gt;
                &lt;button type='submit'&gt;Get weather&lt;/button&gt;
            &lt;/form&gt;
        );
    }
}

/**
 * And how you use it in your App
 */
export class App extends React.Component {
    constructor() {
        this.state = {
            weather: {}
        };
    }

    /**
     * The userInput is provided by the WeatherForm
     */
    handleSubmit = (userInput) =&gt; {
        getWeatherFromInput(userInput).then((response) =&gt; {
            this.setState({ weather: response.data });
        });
    };

    render() {
        return &lt;WeatherForm onSubmit={handleSubmit} /&gt;;
    }
}
</code></pre>


<p>I am trying to structure my API call to the openweatherapi properly, just trying to create a simple weather app, where upon the user entering a city the forecast is rendered to the page. This is what I have so far, also trying to prevent the default action where the page refreshes when the button is pressed. I am using react.</p>

<pre><code>class App extends Component {
  getWeatherData = (userInput, event) =&gt; {
    event.preventDefault();
    axios({
      url: "http://openweathermap.org/data/2.5/weather/",
      method: "GET",
      dataType: "json",
      data: {
        q: userInput,
        API_KEY: "d108038ec889cfe762230283abaa7c7b"
      }
    }).then(res =&gt; {
      console.log(res);
      this.setState({});
    });
  };
</code></pre>

<p>./Form. js is as follows</p>

<pre><code>class Form extends Component {
  render() {
    return (
      &lt;div&gt;
        &lt;form onSubmit={(this.props.getWeather, e)}&gt;
          &lt;input type="text" name="city" placeholder="City..." /&gt;
          &lt;input type="text" name="country" placeholder="Country" /&gt;
          &lt;button&gt;Get Weather&lt;/button&gt;

        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>Error:</p>

<pre><code>./src/Form.js
  Line 7:  'e' is not defined  no-undef
</code></pre>


How to structure my API call, and where to put the key and query?

我正在尝试恰当地组织我对openweatherapi的API调用，只是尝试创建一个简单的天气应用程序，当用户输入一个城市时，天气预报就会呈现到页面上。这就是我到目前为止所做的，也试图阻止当按钮被按下时页面刷新的默认操作。我正在使用react。class App extends Component {  getWeath...

问如何构造我的API调用，把key和query放在哪里？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何构造我的API调用，把key和query放在哪里？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何构造我的API调用，把key和query放在哪里？
EN