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

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

onHandleSubmit（）

函数中输入的值，但出现错误：

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

我的搜索栏组件：

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;

import React，{Component}来自“React”；
类搜索栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
城市：“
};
this.onHandleChange=this.onHandleChange.bind（this）；
this.onHandleSubmit=this.onHandleSubmit.bind（this）；
}
render（）{
返回(
搜索！
);
}
onHandleChange（e）{
这是我的国家({
城市：e.target.value
});
}
onHandleSubmit（e）{
e、 预防默认值（）；
const city=this.state.city；
此.props.onSearchTermChange（城市）；
this.mainport.value=“”；
}
}
导出默认搜索栏；

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

也在

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"
    />

但是，如果出于某种原因，即使表单已提交，您仍希望保持该值的状态，那么您宁愿使输入不受控制

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

---

话虽如此，我不认为保持状态不变有任何意义，因此第一个选项应该是要走的路。

您有一个受控组件，其中

输入值由
this.state.city
决定。因此，一旦你提交，你必须清除你的状态，这将自动清除你的输入

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

这个.main输入实际上没有指向任何东西。由于您使用的是受控组件（即，输入值从state获得），因此可以将
this.state.city
设置为空：

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

在
onHandleSubmit
函数中，再次将状态设置为
{city:'}
，如下所示：

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

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

使用。然后（）

例如：

 const onSubmit =  e => {
e.preventDefault();
const fd = new FormData();
fd.append("ticketType", ticketType);
fd.append("ticketSubject", ticketSubject);
fd.append("ticketDescription", ticketDescription);
fd.append("itHelpType", itHelpType);
fd.append("ticketPriority", ticketPriority);
fd.append("ticketAttachments", ticketAttachments);
newTicketITTicket(fd).then(()=>{
  setTicketData({
    ticketType: "IT",
    ticketSubject: "",
    ticketDescription: "",
    itHelpType: "",
    ticketPriority: ""
  })
})  

})
 这是我想在状态第一步中清除并创建的值

state={
TemplateCode:"",
}

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>

craete submitHandler功能，用于第三步中的按钮或所需内容

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

这是明确的功能最后一步

state={
TemplateCode:"",
}

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>

当单击按钮模板代码被清除时，第二步

state={
TemplateCode:"",
}

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>


拯救
感谢大家的评论！我真傻……它成功了。我想如果我改变状态，我的数据就会从屏幕上消失（是的，这就是我的逻辑工作的糟糕程度）。非常感谢。如果使用提交事件中收到的
formData
，则时间
ref
是可用的。哪一个应仅用于简单表单提交、受控或非受控组件？