php - React JS表单连接Mysql DB
问题描述
我正在尝试连接我的 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>
);
};
解决方案
推荐阅读
- amazon-web-services - 我可以在 AWS 中将弹性 IP 与 Cloudfront 一起使用吗?
- sonata-admin - Sonata Block Bundle 编辑表单不保存 EntityType
- android - 混合版本会导致 Firebase 中的运行时崩溃?
- r - 无法使用功能在 R 中发送电子邮件
- javascript - 在将值从数据表存储到变量时,它要么说服务器端未定义,要么变量未定义
- java - Jhipster Prod 构建失败以及未找到 Cloudfoundry 错误
- linux - 定期运行 shelll 脚本或运行 raspbian 的树莓派 3
- php - word press 管理员不工作
- pandas - 百分比计数动词,名词使用 Spacy?
- c# - 使用 NAudio.Lame