Невозможно получить значения React Form

Question

Я создал форму с response-semantic, а затем попытался проанализировать в базе данных поля через json. Но я не могу получить значения. Мой код формы:

 class FormPatient extends Component {
      state = {}

      constructor(props) {
        super(props);
        this.state = {
          patient: {
            firstName: '',
            lastName: '' } }}

      onFirstNameChange = (event) => {
        this.setState({firstName: event.target.value});  }

      onLastNameChange = (event) => {
        this.setState({lastName: event.target.value});}

      onSubmit = () => {
        console.log(this.state);
        fetch('http://localhost:3000/', {
          method: 'post',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            firstName: this.state.firstName,
            lastName: this.state.lastName })})
        .then(response => response.json())
         .then(patient => {
           if (patient) {
              console.log(patient);
              this.props.loadPatient(this.state.patient)  }}) }

     render() {
        const { value } = this.state
        return ( 
            <Form>
              <Form.Group widths='equal'>
                <Form.Field 
                  control={Input} 
                  label='First name' 
                  placeholder='First name' 
                  onChange={this.onFirstNameChange}/>
                <Form.Field 
                  control={Input} 
                  label='Last name' 
                  placeholder='Last name' 
                  onChange={this.onLastNameChange}/>
               </Form.Group>
           </Form>)}}

    export default FormPatient

Первый файл console.log получает значения -> {Patient: {…}, firstName: "asg", lastName: "asgd"} но второе после выборки не может -> {firstName: "", lastName: ""} Функция loadPatient находится в файле приложения.

 loadPatient = (data) => {
            this.setState({patient: {
              id: data.id,
              firstName: data.firstName,
              lastName: data.lastName,
              joined: data.joined}})}

Answer 1

Причина, по которой это не сработало, потому что у вас есть firstName и lastName внутри объекта пациента в состоянии внутри constructr, но вы обращаетесь как this.state.firstName и this.state.lastName в onSubmit, поэтому он не будет работать.

Также вы не передаете реквизиты SubSmit в форму, поэтому при отправке формы OnSubmit не сработает.

Пожалуйста, попробуйте с ниже обновленным кодом

    class FormPatient extends Component {

      constructor(props) {
        super(props);
        this.state = {
            patient: {
                firstName: '',
                lastName: ''
            } 
        }
      }

      onFirstNameChange = (event) => {
        this.setState({patient: {
            firstName: event.target.value
           }
        });  
      }

      onLastNameChange = (event) => {
        this.setState({patient: {
            lastName: event.target.value
           }
        });
      }

      onSubmit = (event) => {
        console.log(this.state);
        event.preventDefault();
        fetch('http://localhost:3000/', {
          method: 'post',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            firstName: this.state.firstName,
            lastName: this.state.lastName })})
        .then(response => response.json())
         .then(patient => {
           if (patient) {
              console.log(patient);
              this.props.loadPatient(this.state.patient)  }}) }

     render() {
        const { value } = this.state
        return ( 
            <Form onSubmit={this.onSubmit}>
              <Form.Group widths='equal'>
                <Form.Field 
                  control={Input} 
                  label='First name' 
                  placeholder='First name' 
                  onChange={this.onFirstNameChange}/>
                <Form.Field 
                  control={Input} 
                  label='Last name' 
                  placeholder='Last name' 
                  onChange={this.onLastNameChange}/>
               </Form.Group>
           </Form>)}}

    export default FormPatient