描述:输入编辑框通过map循环输出,刚开始的时候将每一个的值得设置成了相同的值
<FormItem style={item.editor?{display:'block'}:{display:'none'}}>
{getFieldDecorator(’con')(<Input className={style.mapboxinput} />)}
</FormItem>
导致了以下现象:
1.当所有标题处于编辑状态下,任意一个输入,导致全部输入一样
2.当对数组进行删除操作后,this.props.form.getFieldValue(‘con’)获取不到输入,在页面的input框可以看到value的改变,但是就是获取不到
3.当数组只剩下最后一个元素的时候,可以重新获取到值
最后解决的方案:在设定this.props.form.getFieldDecorator的第一个参数的时候,一定要是不同的值,解决问题
实现的效果
点击编辑的时候:转为输入框和确定按钮
点击添加:新增可编辑模块
this.state={
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
titles:[{name:'一.选择题',editor:false},{name:'二.填空题',editor:false}],
active:0,//点击激活项
}
// 渲染模块标题
renderTitle(){
const { getFieldDecorator } = this.props.form;
if(this.state.titles.length==0){
return ''
}else{
return (
this.state.titles.map((item,index)=>{
let str = index+''
return(//这里在map的时候一定要再记得return一次,不然不会渲染出元素
<div className={style.mapbox}>
<FormItem style={item.editor?{display:'block'}:{display:'none'}}>
{getFieldDecorator(str)(<Input className={style.mapboxinput} />)}
</FormItem>
<div className={style.mapTitle} style={item.editor?{display:'none'}:{display:'block'}}>
<span onClick={()=>{
this.changeActive('activei',index)
}}>{item.name}</span>
<Icon type="form" onClick={()=>{
this.changeActive('editor',index)
}} />
</div>
{item.editor?<Button className={style.btnl} type="primary"
onClick={()=>{this.changeActiveHandleSure(index)}}>确认
</Button>:
<Button className={style.btn2} type="default"
onClick={()=>{this.changeActiveHandleDelete(index)}}>
<Icon type="delete" />删除
</Button>}
</div>
)
})
)
}
}
changeActive=(type,i)=>{
const {active} = this.state;
if(type == 'activei'){//点击切换模块题型内容的展示
// console.log(i)
if(active == i)return false
this.setState({
active:i
})
}else if(type == 'editor'){//点击编辑
let data = this.state.titles
data[i].editor = true;
this.setState({
titles:data
})
}
}
// 点击确认,修改模块名称
changeActiveHandleSure=(i)=>{
let data = this.state.titles
let newdata = this.props.form.getFieldValue(i)
if(!newdata){
message.success('请重输入模块标题', 1);
return
}
if(newdata.length>=10){
message.success('模块标题过长,请重新输入', 1);
return
}else{
data[i].name = newdata;
data[i].editor = false;
this.setState({
titles:data
})
this.props.form.resetFields();
}
}
// 删除模块
changeActiveHandleDelete=(i)=>{
let data = this.state.titles
console.log(data)
let newdata = data.filter((item,index)=>index!=i)
console.log(newdata)
setTimeout(()=>{
this.setState({
titles:newdata
})
},10)
}
// 点击自定义添加模块
addTitleBox=()=>{
let obj = {name:'模块名称',editor:false};
let data = this.state.titles
data.push(obj)
console.log(data)
this.setState({
titles:data
})
}