Question

我遇到了一个相当愚蠢的问题。我正在创建我的第一个React应用程序，我遇到了一个小问题，在提交表单后我无法清除输入值。一个尝试谷歌搜索这个问题，在这里发现了一些类似的线程，但我无法解决这个问题。我不想更改组件/应用程序的状态，只是将输入值更改为空字符串。我尝试清除onHandleSubmit()函数中输入的值，但是出现错误：

“无法设置未定义的属性'值'。

我的SearchBar组件：

import React, { Component } from "react";

class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      city: ""
    };

    this.onHandleChange = this.onHandleChange.bind(this);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
  }

  render() {
    return (
      <form>
        <input
          id="mainInput"
          onChange={this.onHandleChange}
          placeholder="Get current weather..."
          value={this.state.city}
          type="text"
        />
        <button onClick={this.onHandleSubmit} type="submit">
          Search!
        </button>
      </form>
    );
  }

  onHandleChange(e) {
    this.setState({
      city: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }
}

export default SearchBar;

Answer 1

您有一个受控制的组件input值由this.state.city决定。因此，一旦提交，您必须清除您的状态，这将自动清除您的输入。

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.setState({
      city: ''
    });
}

Answer 2

由于输入字段是受控元素，因此无法在不修改状态的情况下直接更改输入字段值。

同样在

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }

this.mainInput未引用输入，因为mainInput是id，您需要为输入指定引用

<input
      ref={(ref) => this.mainInput= ref}
      onChange={this.onHandleChange}
      placeholder="Get current weather..."
      value={this.state.city}
      type="text"
    />

在当前状态下，最好的方法是清除状态以清除输入值

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.setState({city: ""});
  }

但是，如果您仍然出于某种原因想要将值保持在状态，即使表单已提交，您也希望不加控制地输入

<input
      id="mainInput"
      onChange={this.onHandleChange}
      placeholder="Get current weather..."
      type="text"
    />

并更新状态onChange和onSubmit中的值，使用ref清除输入

 onHandleChange(e) {
    this.setState({
      city: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }

话虽如此，我认为保持国家不变没有任何意义，所以第一个选择应该是要走的路。

Answer 3

this.mainInput实际上并没有指向任何内容。由于您使用的是受控组件（即输入的值是从状态获得的），您可以将this.state.city设置为null：

onHandleSubmit(e) {
  e.preventDefault();
  const city = this.state.city;
  this.props.onSearchTermChange(city);
  this.setState({ city: '' });
}

Answer 4

在onHandleSubmit功能中，将状态设置为{city: ''}，如下所示：

this.setState({ city: '' });

Answer 5

以上答案不正确，它们将全部运行，否则提交将无法成功...您需要编写一个将接收任何错误的错误组件，然后检查状态是否有错误，如果没有，则清除表格。...

使用.then（）

示例：

converted_amount == amount

};

Answer 6

这是我要清除并在状态1st STEP中创建的值

state={
TemplateCode:"",
}

为Button或您想要的第3步添加Craige SubmitHandler函数

submitHandler=()=>{
this.clear();//this is function i made
}

这是Final STEP的明确功能

clear = () =>{
  this.setState({
    TemplateCode: ""//simply you can clear Templatecode
  });
}

在第二步中清除模板代码按钮时

<div class="col-md-12" align="right">
  <button id="" type="submit" class="btn btnprimary" onClick{this.submitHandler}> Save 
  </button>
</div>

React - 在表单提交后清除输入值

6 个答案: