如何解决单击提交后无法自动清除输入字段反应
我是新来的反应者,在单击“提交”按钮后试图自动清除输入字段时遇到麻烦。我相信我已经通过反应使该组件成为完全受控的组件,其中输入值仅取决于状态的输入。希望有人能够提供帮助。现在被困了几个小时。真的不确定我哪里出错了。谢谢!
async function
解决方法
您将输入视为不受控制的组件,因此react无法控制其值,因此无法与其状态同步。因此,通过如下更新来控制您的输入
<input className="movieName" type="movieName" name="movieName" id="movieName" onChange={this.onMovieChange} value={this.state.movieName}>
,
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} />
依此类推...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。