当前位置:网站首页>点击添加按钮--出现一个框框(类似于添加学习经历-本科-研究生)
点击添加按钮--出现一个框框(类似于添加学习经历-本科-研究生)
2022-04-23 05:20:00 【process1212】
import React, { Component } from "react";
class Inner extends Component {
defaultValue = {
taskDescription: "",
vehicleClean: ""
};
constructor() {
super();
this.state = [
{
taskDescription: "",
vehicleClean: ""
}
];
}
changeClean = e => {
let clean = e.target.value;
console.log(this);
this.setState({
vehicleClean: this.state.vehicleClean.concat(clean)
});
console.log(this.state.vehicleClean);
};
changeDescription = e => {
// console.log(e.target.value);
let description = e.target.value;
this.setState({
taskDescription: description
});
};
componentWillMount = () => {
this.showInner();
};
showInner = () => {
this.setState( this.state.push(Object.assign({}, this.defaultValue)));
console.log(result);
taskModel = result.map((item, index) => (
<span key={index}>
<select
name="vehicleClean"
className="vehicle-clean"
onChange={e => this.changeClean(e)}
>
<option value="">请选</option>
<option value="洗车">洗车</option>
<option value="租车">租车</option>
<option value="内饰">内饰</option>
<option value="打蜡">打蜡</option>
<option value="贴膜">贴膜</option>
</select>
<input
type="text"
name="taskDescription"
className="taskZheng"
value={this.state.description}
onChange={e => this.changeDescription(e)}
/>
<br />
</span>
));
};
render() {
return <span>{taskModel}</span>;
}
}
export default class AddTask extends Component {
constructor() {
super();
this.state = {
taskWarn: "",
taskHelper: ""
};
}
addInner = e => {
e.preventDefault();
this.refs.get.showInner();
this.setState({
taskWarn: ""
});
};
render() {
return (
<li>
<label className="title">月任务量</label>
<div className="table-content">
<div className="task-container">
<Inner ref="get" />
</div>
<button
className="add-button"
id="add-button"
onClick={e => this.addInner(e)}
>
添加
</button>
</div>
<div className="error">
<span id="cleanWarn" className={this.state.taskWarn}>
{this.state.taskHelper}
</span>
</div>
</li>
);
}
}
版权声明
本文为[process1212]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_33589252/article/details/82701972
边栏推荐
- 7-4 is it too fat (10 points) PTA
- Study notes: unity customsrp-11-post processing --- bloom
- Using MySQL with Oracle
- Installing kuberneters using kubedm
- 2021-10-08
- Locks and transactions in MySQL
- Data management of basic operation of mairadb database
- Three of three JS (webgl) is simple to draw lines / arcs according to points (based on linegeometry / line2 / linematerial, draw two arc segments based on the center of the circle)
- 我这位老程序员对时代危险和机遇的一点感悟?
- 5 minutes to understand MySQL row column conversion
猜你喜欢

mariadb数据库的主从复制

了解 DevOps,必读这十本书!

5 minutes to understand MySQL row column conversion

C#测试调用PaddleSharp模块识别图片文字

MFC实现资源单独Dll实现

Redis data type usage scenario

4 most common automated test challenges and Countermeasures

使用zerotier让异地设备组局域网

Power consumption parameters of Jinbei household mute box series

改进DevSecOps框架的 5 大关键技术
随机推荐
Publish your own wheel - pypi packaging upload practice
狼叔来找翻译人员了--plato--持续翻译中.....
学习笔记:Unity CustomSRP-13-ColorGrading
WTL 自绘控件库 (CQsCheckComboxBox)
Discussion on flow restriction
学习笔记:Unity CustomSRP-12-HDR
mariadb数据库的主从复制
At pgconf Asia Chinese technology forum, listen to Tencent cloud experts' in-depth understanding of database technology
Graphics. Fromimage reports an error "graphics object cannot be created from an image that has an indexed pixel..."
2022年最热门的招聘技术技能是什么,您绝对想不到
看板快速启动指南
Study notes: unity customsrp-10-point and spot shadows
Where, on when MySQL external connection is used
calendar. Pit point of getactualmaximum (calendar. Day_of_month)
Collaboration future object and concurrent futures
【openh264】cmake: msopenh264-static
Good simple recursive problem, string recursive training
Anti crawler (0): are you still climbing naked with selenium? You're being watched! Crack webdriver anti crawler
Get the number of days between dates, get the Chinese date, get the date of the next Monday of the date, get the working day, get the rest day
Source code analysis of how to use jump table in redis