版权声明:本文为博主原创文章,未经博主允许不得转载,转载请注明地址。 https://blog.csdn.net/qq_33589252/article/details/82701972
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>
);
}
}