我按照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})
- }