当前位置:网站首页>点击添加按钮--出现一个框框(类似于添加学习经历-本科-研究生)
点击添加按钮--出现一个框框(类似于添加学习经历-本科-研究生)
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
边栏推荐
猜你喜欢
我这位老程序员对时代危险和机遇的一点感悟?
Three 之 three.js (webgl)简单实现根据点绘制线/弧线(基于LineGeometry / Line2 / LineMaterial,绘制两点基于圆心的弧线段)
At pgconf Asia Chinese technology forum, listen to Tencent cloud experts' in-depth understanding of database technology
JS Array常见方法
Routing parameters
Devops life cycle, all you want to know is here!
开源规则引擎——ice:致力于解决灵活繁复的硬编码问题
Simple application of parallel search set (red alarm)
4 个最常见的自动化测试挑战及应对措施
2021-09-28
随机推荐
Where, on when MySQL external connection is used
Semi synchronous replication of MariaDB
Some experience in using MySQL / tidb database [slowly updating...]
Redis lost key and bigkey
Flip coin (Blue Bridge Cup)
Discussion on flow restriction
MySQL circularly adds sequence numbers according to the values of a column
Backup MySQL database with Navicat
学习笔记:Unity CustomSRP-11-Post Processing---Bloom
Study notes: unity customsrp-11-post processing --- bloom
Various ways of writing timed tasks of small programs
7-4 is it too fat (10 points) PTA
SQLyog的基本使用
The 2021 IT industry project management survey report was released!
JS array common methods
Good simple recursive problem, string recursive training
Laravel routing job
Five key technologies to improve the devsecops framework
One month countdown, pgconf What are the highlights of the latest outlook of asia2021 Asian Conference?
【openh264】cmake: msopenh264-static