Reactjs 在react.jsx中添加一个演示按钮，它将填充表单数据
我想添加一个演示按钮。当我选择该按钮时，它需要按照我提供的数据填写表单。我试图实现一个按钮，但它不起作用 这是我的code.jsx文件Reactjs 在react.jsx中添加一个演示按钮，它将填充表单数据,reactjs,Reactjs,我想添加一个演示按钮。当我选择该按钮时，它需要按照我提供的数据填写表单。我试图实现一个按钮，但它不起作用 这是我的code.jsx文件 import React, { Component } from 'react'; import { Card } from 'antd'; import axios from 'axios'; import { notification} from "antd"; export default class AddDepartment ex
import React, { Component } from 'react';
import { Card } from 'antd';
import axios from 'axios';
import { notification} from "antd";
export default class AddDepartment extends Component {
constructor(props) {
super(props);
this.state = {
admins:[],
empId:[],
admin_id:'',
dept_id:'',
dept_name:'',
dept_manager_name:''
}
}
componentDidMount(){
this.fetchAdmins();
this.fetchAdmins();
}
//Admin data as foreign key
fetchAdmins = () =>{
axios.get("http://127.0.0.1:8000/admin-list/").then(res=>
{
const admins=res.data;
this.setState({admins});
}
)
}
fetchEmployee = () => {
axios.get("http://127.0.0.1:8000/employeeid/").then(res=>
{
const empId=res.data;
this.setState({empId});
}
)
}
formData = (e) => {
this.setState({ [e.target.name]: e.target.value });
this.setState({ radstatus: !this.state.radstatus });
console.log(
this.state.dept_name,
this.state.dept_manager_name
);
console.log(this.state.radstatus);
console.log(this.state.event);
};
drop = (e) =>{
this.setState({[e.target.name]:e.target.value})
console.log(this.state.event)
}
onCreateEmp = () => {
console.log();
}
formSubmit = (e) =>{
e.preventDefault();
const deptdata ={
admin_id:this.state.admin_id,
dept_id:this.state.dept_id,
dept_name:this.state.dept_name,
dept_manager_name:this.state.dept_manager_name,
}
console.log(deptdata)
const args = {
description:
"Data added successfully",
duration: 0,
};
notification.open(args);
var url = "http://127.0.0.1:8000/department-Create/";
fetch(url,{
method: 'POST',
headers:{
'Content-type':'application/json',
},
body: JSON.stringify(deptdata)
}).then((response) => {
alert(response)
}).catch(function(err){
alert(err)
})
}
render() {
return (
<div>
<div className="row">
<div className="col main">
<h1
style={{
color: "DodgerBlue",
fontSize: '30px',
fontWeight:"bold"}}>
<center>ADD DEPARTMENT</center>
</h1>
<br></br><br></br>
<form onSubmit= {this.formSubmit}
style={{
fontWeight:"bold"}}
>
<Card style={{ width: 1000,}}>
<br></br>Admin ID :<select required onChange={this.formData} id="admin" name="admin_id" style={{border: "3px solid #ccc",float: "right",width: "68%",height:45}}>
{this.state.admins.map((ad) =>{
const adId = ad.id;
const adName = ad.username;
return(
<option value={ad.id}>{ad.username}</option>
);
})}
</select>
<br></br><br></br>
<br></br>Department ID : <input required style={{border: "3px solid #ccc",float: "right",width: "68%",height:30}} type="text" onChange= {this.formData} name="dept_id"></input><br></br><br></br>
Name : <input required style={{border: "3px solid #ccc",float: "right",width: "68%",height:30}} type="text" onChange= {this.formData} name="dept_name" ></input><br></br><br></br>
Manager of Department : <input required style={{border: "3px solid #ccc",float: "right",width: "68%",height:30}} type="text" onChange= {this.formData} name="dept_manager_name" ></input><br></br><br></br>
<br></br><br></br>
</Card>
<div>
<br></br><br></br><br></br>
<input style={{width:"100%", cursor: "pointer",backgroundColor:"DodgerBlue",border:"none",padding:"12px 28px",margin:"2px 1px",borderRadius:"2px",fontWeight:"bold"}} type="submit" value="Add Department"></input>
<button>DEMO</button>
</div>
</form>
</div>
</div>
</div>
)
}
}
import React，{Component}来自'React'；
从“antd”导入{Card}；
从“axios”导入axios；
从“antd”导入{notification}；
导出默认类AddDepartment扩展组件{
建造师（道具）{
超级（道具）；
this.state={
管理员：[]，
empId:[]，
管理员id:“”，
部门id:“”，
部门名称：“”，
部门经理姓名：“”
}
}
componentDidMount（）{
this.fetchAdmins（）；
this.fetchAdmins（）；
}
//管理数据作为外键
fetchAdmins=（）=>{
axios.get（“http://127.0.0.1:8000/admin-然后（res=>
{
const admins=res.data；
this.setState（{admins}）；
}
)
}
fetchEmployee=（）=>{
axios.get（“http://127.0.0.1:8000/employeeid/）然后（res=>
{
const empId=res.data；
this.setState（{empId}）；
}
)
}
formData=（e）=>{
this.setState（{[e.target.name]：e.target.value}）；
this.setState（{radstatus:！this.state.radstatus}）；
console.log(
这个州政府部门的名字，
这是州政府部门经理的名字
);
console.log（this.state.radstatus）；
console.log（this.state.event）；
};
下降=（e）=>{
this.setState（{[e.target.name]：e.target.value}）
console.log（this.state.event）
}
onCreateMP=（）=>{
console.log（）；
}
formSubmit=（e）=>{
e、 预防默认值（）；
常数deptdata={
admin\u id:this.state.admin\u id，
部门id:this.state.dept\u id，
部门名称：this.state.dept\u name，
部门经理姓名：this.state.dept经理姓名，
}
console.log（deptdata）
常量args={
说明：
“数据添加成功”，
持续时间：0，
};
通知。打开（args）；
变量url=”http://127.0.0.1:8000/department-创建/“；
获取（url{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（deptdata）
})。然后（（响应）=>{
警报（响应）
}).catch（函数（err）{
警报（错误）
})
}
render（）{
返回(
添加部门
管理员ID:
{this.state.admins.map（（ad）=>{
const adId=ad.id；
const adName=ad.username；
返回(
{ad.username}
);
})}
部门ID:
名称：
部门经理：
演示
)
}
}
当我选择演示按钮时，表单需要在相关的输入会话中填写此数据。您可以创建一个方法，当您单击按钮时更新状态。您是否有关于如何执行此操作的问题？您是否尝试了某种方法？是否有效？如果没有，问题是什么？我尝试过。但它不起作用。我尝试添加此中的数据。但它在
componentDidMounthis.fetchAdmins（）；this.fetchEmployee（）