Невозможно ввести в поле ввода React - PullRequest
Новая
       6

Невозможно ввести в поле ввода React

0 голосов
/ 29 декабря 2018

Я не могу ввести любой ввод в поле ввода.Я использую React, и уже установил handleChange и функцию handleSubmit.Первые два поля ввода, для 'name' и 'email', принимают ввод просто отлично.Но для «фаворита» это, похоже, не работает.

Интересно, это из-за ошибки 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;

Пожалуйста, помогите.

1 Ответ

0 голосов
/ 29 декабря 2018

Странно, что электронная почта работает нормально, из того, что вы опубликовали, функция handleChange обновляет только имя в newUser.

То, что вы должны увидеть, - это то, что вы вводите все входы, появляющиеся в имени ввода.

Чтобы это исправить, вам, вероятно, нужно иметь отдельные обработчики изменений для каждого ввода:

  • handleNameChange
  • handleEmailChange
  • ...

Вы также должны рассмотреть вопрос о сохранении имени, адреса электронной почты и т. Д. В корне своего состояния вместо вложенияих в объекте, что упростит код функций-обработчиков.

...