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

我是新手，在单击提交按钮后，我无法尝试自动清除输入字段。我相信我已经通过react使组件完全受控，其中输入值完全依赖于状态的输入。希望有人能帮忙。我已经被困了几个小时了。真的不知道我哪里出错了。谢谢

import React, { Component } from 'react'; 
import './App.css';
import Axios from 'axios';
import { Link, BrowserRouter, Route} from 'react-router-dom';
import reviews from './Screen/Reviews'; 

class App extends Component{

  constructor() {
    super();

    this.state = {
      movieName: '',
      setReview: ''
    };

    this.onMovieChange = this.onMovieChange.bind(this);
    this.onReviewChange = this.onReviewChange.bind(this);
    this.submitReview = this.submitReview.bind(this);

  }
  onMovieChange(e) {
    this.setState({
      movieName: e.target.value
    });
  }
  onReviewChange(e) {
    this.setState({
      setReview: e.target.value
    });
  }
  submitReview(e) {
    e.preventDefault();
    const movieName = this.state.movieName;
    const movieReview = this.state.setReview;
    Axios.post('http://localhost:3001/api/insert',
    {movieName: movieName, movieReview: movieReview}).then(()=>
    {
      alert('Insert successfully');  
    }
    ) 
    this.setState({
      movieName: '',
      setReview: ''
    })
  }
    
  render() {
    return (
      <BrowserRouter>
      <div className="form">
      <form   >
        <ul className="form-container">
          <li>
            <h2>Movie Review</h2>
          </li>  
          <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>
          <li> 
          <button onClick={this.submitReview}  type="submit" className="button-register-registration ">Submit</button>

          </li>

          <li>
            <Link to="/review" className="button-register-for-sign-in" ><h4>Go to reviews</h4></Link>
          </li>
        </ul>
      </form>
      <main>
        <div className="content">
        <Route path={"/review"} component={reviews}></Route> 
        </div>
      </main>
      </div>
    </BrowserRouter>
    );
  }

}

import React，{Component}来自'React'；
导入“/App.css”；
从“Axios”导入Axios；
从“react router dom”导入{Link，BrowserRouter，Route}；
从“/Screen/reviews”导入评论；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
电影名称：''，
setReview:“”
};
this.onMovieChange=this.onMovieChange.bind（this）；
this.onReviewChange=this.onReviewChange.bind（this）；
this.submitReview=this.submitReview.bind（this）；
}
onMovieChange（东）{
这是我的国家({
movieName:e.target.value
});
}
更新（e）{
这是我的国家({
setReview:e.target.value
});
}
提交视图（e）{
e、 预防默认值（）；
const movieName=this.state.movieName；
const movieview=this.state.setReview；
轴心柱http://localhost:3001/api/insert',
{movieName:movieName，movieReview:movieReview}）。然后（（）=>
{
警报（“插入成功”）；
}
) 
这是我的国家({
电影名称：''，
setReview:“”
})
}
render（）{
返回(


影评


电影名称{“”}


复习{'}


提交


浏览评论


);
}
}

您将输入视为不受控制的组件，因此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>

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

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

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

借

等等

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

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