Не могу очистить форму / состояние после ввода в React.js

Question

У меня есть форма, которая в конечном итоге будет использоваться в качестве пользовательского интерфейса для выполнения некоторых вызовов 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='';.