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

【问题标题】：Can't clear form/state after input in React.js在 React.js 中输入后无法清除表单/状态
【发布时间】：2018-06-12 14:24:12
【问题描述】：

我有一个表单，最终将用作 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>
        );
      }
    }

【问题讨论】：

标签： forms reactjs state

【解决方案1】：

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

【讨论】：