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

用户名

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

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>
    );
  }

}
普拉文·马修·菲利普(Praveen Mathew Philip)

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在React中提交表单后无法清除输入字段

来自分类Dev

提交后反应清除表单字段

来自分类Dev

单击按钮后清除输入字段

来自分类Dev

单击提交按钮后,停止清除字段

来自分类Dev

提交到数据库后如何清除输入字段

来自分类Dev

单击按钮后,我试图清除输入字段

来自分类Dev

提交时清除输入字段

来自分类Dev

提交后清除文本输入

来自分类Dev

单击按钮清除输入字段

来自分类Dev

一旦在本机反应中单击提交按钮,即可清除文本输入数据

来自分类Dev

输入字段清除后消失

来自分类Dev

提交输入值后清除输入

来自分类Dev

React:提交表单后如何清除文件输入和数据输入字段?

来自分类Dev

在 React 中提交表单后无法重置输入字段

来自分类Dev

清除Angular表单提交中的输入字段?

来自分类Dev

清除输入字段,但“提交”按钮除外

来自分类Dev

在React中使用useEffect函数组件成功提交后如何清除输入字段

来自分类Dev

在C#中提交后,Unity3d清除输入字段

来自分类Dev

提交后的django清除表单字段

来自分类Dev

成功提交后清除表单字段

来自分类Dev

使用Typehead提交后清除输入数据

来自分类Dev

提交后React Hooks清除输入

来自分类Dev

提交后如何清除表单输入?

来自分类Dev

单击按钮时清除输入字段

来自分类Dev

如何清除图像的单击输入字段?

来自分类Dev

单击 div 时清除最近的输入字段

来自分类Dev

单击事件后清除输入文本

来自分类Dev

单击按钮后如何清除输入值?

来自分类Dev

单击事件后清除输入文本