Блог

Я новичок в react, и у меня возникают проблемы при попытке автоматически очистить поле ввода после нажатия кнопки отправки. Я считаю, что я сделал компонент полностью контролируемым с помощью 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>
    );
  }

}
  

вы обрабатываете ввод как неконтролируемый компонент, поэтому react не может контролировать его значение и, следовательно, не синхронизируется с его состоянием. Поэтому сделайте свой ввод контролируемым, обновив, как показано ниже

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

Ответ Правина Мэтью Филипа правильный и должен решить вашу проблему, но есть и другие проблемы с вашим кодом.

Во-первых, в ваших двух вводах:

 <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" вместо. Для получения полного списка возможных входных данных обратитесь к <a rel="noreferrer noopener nofollow" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#_types» rel=»nofollow noreferrer»>этому

Вам может сойти с рук только одна handleChange функция, которая получит имя вашего ввода из события и очистит ваш код.

Что-то вроде:

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

Наконец, вы могли бы улучшить свой код с помощью инструмента под названием Prettier .

Это очистило бы некоторые отступы и заменило бы некоторый бесполезный код, такой как

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

Автор:

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

И так далее…