Я не могу писать в TextFields - PullRequest
Новая
       40

Я не могу писать в TextFields

0 голосов
/ 25 октября 2019

Я пытаюсь добавить нового пользователя в свою базу данных, используя метод поста axios, с формой, которую я сделал с помощью пользовательского интерфейса, приложение работает хорошо, не замечает никаких ошибок консоли или в браузере, и если оно показывает мнеформу, но я не могу написать TextFields.

До добавления функций я мог писать хорошо, но после добавления Onchange и значения я больше не позволял себе писать

Что может происходить?

Компонент 

import React, { useState } from "react"; 
import  axios  from 'axios';

//useState hook create a state named user with initial state set to an object with name, lastname and age properties set to empty strings

function UserAdd(props) {
  const initialState = { name: '', lastname: '', age:0 }

  const [user, setUser] = useState(initialState) 

  function handleChange(event) { 
    setUser({...user, [event.target.name]: event.target.value})
  }

  function handleSubmit(event) { 
    event.preventDefault();  
    if(!user.name || !user.lastname || !user.age) return 
    async function postUser() {
      try {
        const response = await post('/api/addUser', user); 
        props.history.push(`/user/${response.data._id}`);  
      } catch(error) {
        console.log('error', error);
      }
    }
    postUser();
  }

  function handleCancel() {
    props.history.push("/users");
  }

  return ( 
        <div style={{ padding: 16, margin: 'auto', maxWidth: 1000 }}> 
    <Typography variant="h4" align="center" component="h1" gutterBottom>
    Add User
  </Typography>
    <form onSubmit={handleSubmit} className={classes.container} >
      <TextField
        label="Name"
        className={classes.textField}
        value={user.name}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />
      <TextField
        id="filled-read-only-input"
        label="Lastname "
        className={classes.textField}
        value={user.lastname}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />
      <TextField
        required
        id="filled-required"
        label="Age"
        className={classes.textField}
        value={user.age}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />

      <Grid item style={{ marginTop: 30 }}>
        <Button
            variant="contained"
            color="primary"
            type="submit">
                  Add
        </Button>
      </Grid>
      <Grid item style={{ marginTop: 30 }}>
        <Button
            onClick={handleCancel}
            variant="contained"
            type="cancel">
                  Cancel
        </Button>
      </Grid>
    </form>
    </div>
  );
}

export default UserAdd;```

1 Ответ

1 голос
/ 25 октября 2019

Похоже, вам нужно иметь атрибут name для передачи с event.target.name. Не уверен, что потребует TextField реквизит, но я предполагаю, что это будет что-то вроде этого: 

<TextField
  name="name" // Add this
  label="Name"
  className={classes.textField}
  value={user.name}
  onChange={handleChange}
  margin="normal"
  variant="outlined"
/>

Точно так же вам понадобится name реквизит для других компонентов ввода.

...