Php React JS表单连接Mysql数据库

我正在尝试连接我的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>
  );
};

返回(
{fields.map（（每个，索引）=>{
返回(
_setActiveInput（each.name）}
onBlur={（）=>\u setActiveInput（null）}
value={formData[each.name]}
自动完成=“关闭”
/>
);
})}
提交
);
};

通过在事件处理程序中执行

此.name

操作，您到底想访问什么？你想访问什么？@cbr我刚刚从一些文章中看到了这一点。这是他们如何将mysql链接到他们的表单，我也在这里输入了它，这显然对我的情况没有帮助