reactjs – React Controlled与Uncontrolled输入

前端之家收集整理的这篇文章主要介绍了reactjs – React Controlled与Uncontrolled输入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我按照React Form教程创建了以下组件:
  1. export default class SignInForm extends React.Component {
  2. constructor(props) {
  3. super(props)
  4.  
  5. this.state = {
  6. email: '',password: ''
  7. }
  8.  
  9. this.onEmailChange = this.onEmailChange.bind(this)
  10. this.onPasswordChange = this.onPasswordChange.bind(this)
  11. }
  12.  
  13. onEmailChange(event) {
  14. this.setState({email: event.target.value})
  15. }
  16.  
  17. onPasswordChange(password) {
  18. this.setState({password: event.target.value})
  19. }
  20.  
  21. render() {
  22. return (
  23. <form onSubmit={this.props.handleSubmit}>
  24. <div>
  25. <label>Email</label>
  26. <div>
  27. <input type="email"
  28. placeholder="you@gmail.com"
  29. onChange={this.onEmailChange}
  30. value={this.state.email}
  31. />
  32. </div>
  33. </div>
  34. <div>
  35. <label>Password</label>
  36. <div>
  37. <input type="password"
  38. placeholder="Password"
  39. onChange={this.onPasswordChange}
  40. value={this.state.password}
  41. />
  42. </div>
  43. </div>
  44. <button type="submit" class="btn btn-primary">Submit</button>
  45. </form>
  46. )
  47. }
  48. }

表单呈现后,我收到以下错误

SignInForm is changing a controlled input of type password to be
uncontrolled. Input elements should not switch from controlled to
uncontrolled (or vice versa). Decide between using a controlled or
uncontrolled input element for the lifetime of the component

我找不到我把它变成一个不受控制的组件的地方.我究竟做错了什么?

看起来你的onPasswordChange方法应该是:
  1. onPasswordChange(event) {
  2. this.setState({password: event.target.value})
  3. }

猜你在找的React相关文章