加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – React Controlled与Uncontrolled输入

发布时间:2020-12-15 20:40:35 所属栏目:百科 来源:网络整理
导读:我按照React Form教程创建了以下组件: export default class SignInForm extends React.Component { constructor(props) { super(props) this.state = { email: '',password: '' } this.onEmailChange = this.onEmailChange.bind(this) this.onPasswordChan
我按照React Form教程创建了以下组件:
export default class SignInForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      email: '',password: ''
    }

    this.onEmailChange = this.onEmailChange.bind(this)
    this.onPasswordChange = this.onPasswordChange.bind(this)
  }

  onEmailChange(event) {
    this.setState({email: event.target.value})
  }

  onPasswordChange(password) {
    this.setState({password: event.target.value})
  }

  render() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        <div>
          <label>Email</label>
          <div>
            <input type="email"
              placeholder="you@gmail.com"
              onChange={this.onEmailChange}
              value={this.state.email}
            />
          </div>
        </div>
        <div>
          <label>Password</label>
          <div>
            <input type="password"
              placeholder="Password"
              onChange={this.onPasswordChange}
              value={this.state.password}
            />
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    )
  }
}

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

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方法应该是:
onPasswordChange(event) {
    this.setState({password: event.target.value})
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读