无法在 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
• ...

您还应该考虑将姓名、电子邮件等存储在状态的根目录中，而不是将它们嵌套在对象中，这将简化处理函数代码。