Question

我是新来的反应者，在单击“提交”按钮后试图自动清除输入字段时遇到麻烦。我相信我已经通过反应使该组件成为完全受控的组件，其中输入值仅取决于状态的输入。希望有人能够提供帮助。现在被困了几个小时。真的不确定我哪里出错了。谢谢！

async function

Answer 1

您将输入视为不受控制的组件，因此react无法控制其值，因此无法与其状态同步。因此，通过如下更新来控制您的输入

  <input className="movieName" type="movieName" name="movieName" id="movieName" onChange={this.onMovieChange} value={this.state.movieName}>

Answer 2

Praveen Mathew Philip的答案是正确的，应该可以解决您的问题，但是您的代码还有其他问题。

首先，在您的两个输入中：

<li>
  <label htmlFor="movieName">
    Movie Name {" "}
  </label>
  <input className="movieName" type="movieName" name="movieName" id="movieName" onChange={this.onMovieChange}></input>
</li>
<li>
  <label htmlFor="review">Review{" "}</label>
  <input className="review" type="review" id="review" name="review" onChange={this.onReviewChange}></input>
</li>

没有movieName和review类型的输入。您可能正在寻找type="text"来代替。有关可能的输入的完整列表，请参见this

您可以只使用一个handleChange函数，该函数将从事件中获取输入名称并保持代码清洁。

大致情况：

handleChange(e) { this.setState({ [e.target.name]: e.target.value }) }

最后，您可以使用名为Prettier的工具来改进代码。

它将清除一些缩进并替换一些无用的代码，例如

<Route path={"/review"} component={reviews}></Route>

作者

<Route path="/review" component={reviews} />

依此类推...

单击提交后无法自动清除输入字段（反应）

2 个答案: