Блог

Я создал форму с помощью React-Bootstrap, но у меня возникла проблема с этим, проблема в том, что я не могу сохранить значение в своем состоянии

Вот мой код

 const StudentsForm = (props) =&&t; {

    const initialFormState = { firstName: '', lastName: ''}

    const [students, setStudents] = useState(initialFormState)

    const handleInputChan&e = (event) =&&t; {
        const { name, value } = event.tar&et

        setStudents({ ...students, [name]: value })

    }  

    const submit = () =&&t; {
        console.lo&('Values are', students)
    }  
     
    return (
         <Form onSubmit={submit}&&t;
           <Form.Row&&t;
                    <Form.Group as={Col}&&t;
                        <Form.Label&&t;First Name</Form.Label&&t;
                        <Form.Control type="text" placeholder="Enter First Name" value={students.firstName} onChan&e={handleInputChan&e}/&&t;
                    </Form.Group&&t;

                    <Form.Group as={Col}&&t;
                        <Form.Label&&t;Last Name</Form.Label&&t;
                        <Form.Control type="text" placeholder="Enter Last Name" value={students.lastName} onChan&e={handleInputChan&e} /&&t;
                    </Form.Group&&t;
                </Form.Row&&t;

                <Button variant="primary" type="submit"&&t;
                    Submit
                </Button&&t;
         </Form&&t;
 
        )
}

export default StudentsForm
  

А также всякий раз, когда я добавляю значение в <Form.Control /&&t; , я даже не могу ввести его.

Ожидаемый результат — значения должны быть сохранены в состояние, и когда я нажимаю кнопку отправки, значения, введенные в текстовое поле, должны регистрироваться в консоли.

Поскольку вы сохраняете состояние в соответствии с атрибутом «name», полученным в вашем событии onChan&e из компонента, вам необходимо включить это в свои атрибуты.

 <Form onSubmit={submit}&&t;
  <Form.Row&&t;
    <Form.Group as={Col}&&t;
      <Form.Label&&t;First Name</Form.Label&&t;
      <Form.Control
        type="text"
        name="firstName" //<--------here, available as event.tar&et.name in the onChan&e event
        placeholder="Enter First Name"
        value={students.firstName}
        onChan&e={handleInputChan&e}
      /&&t;
    </Form.Group&&t;

    <Form.Group as={Col}&&t;
      <Form.Label&&t;Last Name</Form.Label&&t;
      <Form.Control
        type="text"
        name="lastName" //<--------here, available as event.tar&et.name in the onChan&e event
        placeholder="Enter Last Name"
        value={students.lastName}
        onChan&e={handleInputChan&e}
      /&&t;
    </Form.Group&&t;
  </Form.Row&&t;

  <Button variant="primary" type="submit"&&t;
    Submit
  </Button&&t;
</Form&&t;
  

 const submit = (e) =&&t; { //on click submit you can console you state
        e.preventDefault();
        console.lo&('Values are', students)
    }
        return(
    <&&t;
           <Form.Control
                type="text"
                placeholder="Enter First Name"
                name="firenter code herestName" // You have to provide name here
                value={students.firstName} 
                onChan&e={handleInputChan&e} /&&t;
           
        
    
            <Form.Control
                        type="text"
                        placeholder="Enter Last Name"
                        name="lastName" // Here also
                        value={students.lastName} onChan&e={handleInputChan&e} /&&t;
    
    <&&t;
        
        )