Question

我是React的新手，在构建一个简单的表单组件时遇到了问题。有四个输入字段和四个匹配的onChange处理程序。所有这些实际上都是相同的：

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

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

handleFirstNameChange(event) {
    this.setState({firstName: event.target.value});
}

handleLastNameChange(event) {
    this.setState({lastName: event.target.value});
}

render() {
    return (
        <div>
            <label>Email: </label>
            <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} />
            <label>Password: </label>
            <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange} />
            <label>First name: </label>
            <input type="text" name="firstName" placeholder="First name" value={this.state.firstName} onChange={this.handleFirstNameChange} />
            <label>Last name: </label>
            <input type="text" name="lastName" placeholder="Last name" value={this.state.lastName} onChange={this.handleLastNameChange} />
            <input type="submit" value="Add User" onClick={this.handleSubmit} />
        </div>
    )
}

其中三个工作正常。但是，当页面尝试呈现时，密码处理程序将引发TypeError异常“ event.target未定义”。如果删除处理程序和输入元素，则该应用程序将呈现。如果我复制并粘贴其他处理程序和输入之一并更改相关名称，它仍然会引发异常。如果我将输入类型从“密码”更改为“文本”，它仍然会引发异常。我无法弄清楚为什么看似相同的代码片段会引发此异常，但其他所有类似的代码片段都可以正常工作。

如果有问题，整个组件的代码为

class AddUserForm extends Component {
constructor(props) {
    super(props);
    this.state = {
        email: '',
        password: '',
        firstName: '',
        lastName: ''
    };

    this.validate = this.validate.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange(this);
    this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
    this.handleLastNameChange = this.handleLastNameChange.bind(this);
}

validate(user) {
    return (user.email && user.password && user.firstName && user.lastName);
}

handleSubmit(event) {
    let newUser = {
        email: this.state.email,
        password: this.state.password,
        firstName: this.state.firstName,
        lastName: this.state.lastName
    };

    if (AddUserForm.validate(newUser)) {
        fetch(`http://localhost:3001/admin/addUser`, {
            method: 'post',
            headers: new Headers({
                'Content-Type': 'application/x-www-form-urlencoded',
            }),
            body: JSON.stringify(newUser)
        })
            .then( res => {
                const copy = [newUser].concat(this.state.users);
                this.setState({users: copy});
            })
    }

    event.preventDefault();
}

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

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

handleFirstNameChange(event) {
    this.setState({firstName: event.target.value});
}

handleLastNameChange(event) {
    this.setState({lastName: event.target.value});
}

render() {
    return (
        <div>
            <label>Email: </label>
            <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} />
            <label>Password: </label>
            <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange} />
            <label>First name: </label>
            <input type="text" name="firstName" placeholder="First name" value={this.state.firstName} onChange={this.handleFirstNameChange} />
            <label>Last name: </label>
            <input type="text" name="lastName" placeholder="Last name" value={this.state.lastName} onChange={this.handleLastNameChange} />
            <input type="submit" value="Add User" onClick={this.handleSubmit} />
        </div>
    )
}

}

Answer 1

您正在通过编写handlePasswordChange在构造函数中调用handlePasswordChange(this)。您想将其绑定到this。

this.handlePasswordChange = this.handlePasswordChange.bind(this);

仅针对一个输入元素未定义React event.target

1 个答案: