Блог

Я пытаюсь подключить свою форму REACTJS для отправки данных в базу данных MySQL, я создал эту форму, и теперь я пытаюсь подключить ее к базе данных mysql, но она не работает, я также создаю php-файл для подключения к базе данных «save.php «

Я получаю следующую ошибку:

ОШИБКА:

 TypeError: Cannot read property 'first_name' of undefined
App.addFormData
C:/xampp7/htdocs/VoiceForm/src/App.js:49
  46 | {
  47 |   evt.preventDefault();
  48 |   const fd = new FormData();
> 49 |   fd.append('first_name', this.name.first_name.value);
     | ^  50 |   fd.append('last_name', this.name.last_name.value);
  51 |   
  52 |   axios.post('http://localhost/save.php', fd).then(res=>
View compiled
App.addFormData
C:/xampp7/htdocs/VoiceForm/node_modules/react-hot-loader/dist/react-hot-loader.development.js:714
Button._this.handleClick
C:/xampp7/htdocs/VoiceForm/button/button.jsx:85
  82 |         return;
  83 |     }
  84 |     if (onClick) {
> 85 |         onClick(e);
     | ^  86 |     }
  87 | };
  88 | this.renderButton = ({ getPrefixCls, autoInsertSpaceInButton }) => {
View compiled
  

И это APP.js

 class App extends Component {
   constructor(props)
    {
      super(props);
      this.addFormData = this.addFormData.bind(this);
}
  state = {
    recordedString: null,
    activeInput: null,
    isRecording: false,
    loading: false,
    forceStopped: false,
    formData: {},
    inputHistory: [],
    refs: [],
    showModal: false,
    debugMode: false,
    error: null
  };

  //Form Submission
  addFormData(evt)
    {
      evt.preventDefault();
      const fd = new FormData();
      fd.append('first_name', this.name.first_name.value);
      fd.append('last_name', this.name.last_name.value);
      
      axios.post('http://localhost/save.php', fd).then(res=>
      {
      //Success alert
       Swal.fire({
      title: 'Therichpost',
      text: res.data.data,
      type: 'success',
      
    });
    this.myFormRef.reset();
    }
    );
    }
  

Это мой Makeformview.js

  return (
    <Form>
      {fields.map((each, index) => {
        return (
          <Form.Item key={each.name}>
            <Input
              placeholder={each.placeholder}
              name={each.name}
              ref={refs[index]}
              onChange={_handleChange}
              onFocus={() => _setActiveInput(each.name)}
              onBlur={() => _setActiveInput(null)}
              value={formData[each.name]}
              autoComplete="off"
            />
          </Form.Item>
        );
      })}
      <Form.Item className="center">
        <Button type="primary" onClick={_addFormData}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};