单击提交后无法自动清除输入字段(反应)
Unable to clear input field automatically after clicking on submit (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}>
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} />
等等...
我是 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}>
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} />
等等...