Question

我有一个表单，最终将用作UI来对Open weather map进行一些API调用。

现在，当我在输入字段中提交邮政编码时，提交时[object Object]会传播字段，如下面的屏幕截图所示。

对API的调用正在进行，因为我正在获取正确的邮政编码的JSON ......

但是，handleSubmit中的这个不应该处理所有内容，即使用Object.assign创建新状态，然后使用form.zipcode.value = '';清除输入吗？

提前致谢!!

handleSubmit(event) {
    event.preventDefault();
    var form = document.forms.weatherApp;
    api.getWeatherByZip(this.state.zipcode).then(
      function(zip) {
        console.log('zip', zip);

        this.setState(function() {
          return {
            zipcode: Object.assign({}, zip),
          };
        });
      }.bind(this)
    );
    form.zipcode.value = '';
  }

我在这里附上了所有组件的代码。

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) {
        this.setState({
          zipcode: event.target.value,
        });
      }

      handleSubmit(event) {
        event.preventDefault();
        var form = document.forms.weatherApp;
        api.getWeatherByZip(this.state.zipcode).then(
          function(zip) {
            console.log('zip', zip);

            this.setState(function() {
              return {
                zipcode: Object.assign({}, zip),
              };
            });
          }.bind(this)
        );
        form.zipcode.value = '';
      }

      render() {
        return (
          <div className="container">
            <form name="weatherApp" onSubmit={this.handleSubmit}>
              <h2>Open Weather App</h2>
              <div className="row">
                <div className="one-half column">
                  <label htmlFor="insertMode">Insert your location</label>
                  <input
                    name="zipcode"
                    className="u-full-width"
                    placeholder="please enter your zipcode"
                    type="text"
                    autoComplete="off"
                    value={this.state.zipcode}
                    onChange={this.handleChange}
                  />
                </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">
                  <input type="submit" value="Submit" />
                </div>
              </div>
            </form>
          </div>
        );
      }
    }

Answer 1

您应该让反应来管理对DOM的更改，而不是手动编辑它。由于输入字段的值已绑定到this.state.zipcode以重置，因此只需调用this.setState({zipcode: ''})而不是form.zipcode.value='';。

在React.js中输入后无法清除表单/状态

1 个答案: