无法在React输入字段中输入

Question

我无法在输入字段中输入任何输入。我正在使用React，并且已经设置了handleChange和handleSubmit函数。前两个输入字段（用于“名称”和“电子邮件”）可以很好地进行输入。但是对于“ favoriteCity”来说，它似乎不起作用。

我想知道是否是由于我收到的MongoDB错误造成的。

class UserPage extends Component {
    state = {
        user: [],
        newUser: {
            name: '',
            email: '',
            favoriteCity: ''
        }
    }

    getAllUsers = () => {
        axios.get('/api/users')
        .then(res => {
            this.setState({ user: res.data })
        })
    }

    componentDidMount() {
        this.getAllUsers()
    }

    handleChange = event => {
        const newUser = { ...this.state.newUser };
        newUser[event.target.name] = event.target.value;
        this.setState({ newUser: newUser});
    }

    handleSubmit = event => {
        event.preventDefault()
        axios.post('/api/users', this.state.newUser)
        .then(res => {
            this.props.history.push(`/users/${res.data._id}`)
        })
    }
    render() {
        return (
            <div>
            { /* This shows a list of All Users */ }
        {this.state.user.map(user => (
          <div key={user._id}>
          <Link to={`/users/${user._id}`}>{user.name}</Link>
          </div>
        ))}

        <h1>New User Page</h1>
        <form onSubmit={this.handleSubmit}>
          <label>Name: </label>
          <input
            type="text"
            name="name"
            placeholder="Name?"
            value={this.state.newUser.name}
            onChange={this.handleChange}
          />
          <label>Email: </label>
          <input
            type="text"
            name="email"
            placeholder="Email?"
            value={this.state.newUser.email}
            onChange={this.handleChange}
          />
          <label>Favorite City: </label>
          <input
            type="text"
            name="city"
            placeholder="Favorite City?"
            value={this.state.newUser.favoriteCity}
            onChange={this.handleChange}
          />

          <Button
            type="submit"
            value="Submit"
            variant="contained"
            color="primary"
          >
            Create User
          </Button>
        </form>
        </div>
        );
    }
}

export default UserPage;

请帮助。

Answer 1

奇怪的是，根据您发布的handleChange函数，电子邮件仅能在newUser上更新名称。

您应该看到的是您在所有输入中键入的内容出现在名称输入中。

要解决此问题，您可能应该为每个输入使用单独的更改处理程序：

• handleNameChange
• handleEmailChange
• ...

您还应该考虑将名称，电子邮件等存储在状态的根部，而不是将它们嵌套在一个对象中，这将简化处理程序功能代码。