map循环中点击按钮实现清空Input输入框内容

1、问题描述

 不知道大家在使用map循环中有没有遇到这种问题，在带有编辑输入框的循环中，输入值后，若想在点击“换一批”按钮实现循环数据的更新时，会发现，上一次输入的值依然会出现在循环当中的固定位置，尽管循环已经再次执行。这时就需要我们在点击按钮实现换一批的同时就清空Input输入框的内容。

2、解决思路

• 首先在状态机中设置一个inputValue数组，用于接收map中每项输入的值（当前map循环一次呈现8条记录）；
• 在map循环中每次点击某一个input框的同时就会把对应的i值传递给getIndex函数并赋给inputValue数组对应的index值；
• 在input框中输入值时，也会通过绑定的InputChange函数将输入值传递给inputValue数组对应index的value值；
• 当点击“换一批”按钮时触发clear函数清空inputValue数组的值，那么在下一次循环的数据中对应位置的input输入框内容就不会再出现了。

 // 状态机
  constructor(props,context) {
    super(props,context);
    this.state = {
      visible: false,
      content: null,
      posts: [],
      inputValue:[,,,,,,,,],//绑定的输入框文本
    }
  }

getIndex(i){
    index=i;//接收map循环中发出来的索引并复制给index
  }

clear(){
    this.state.inputValue=[]
    console.log("清空input输入框成功");
  }

InputChange(e){
 this.state.inputValue[index]=e.target.value;//接收map循环的输入值并赋值给对应索引的inputValue数组
   }

 const resourcepushList = this.state.resourcePushAll.map((v, i) => {
        const columns = [{
        title: '知识点名称',
        dataIndex: '知识点名称',
        key: '知识点名称',
        width: 80,
      }, {
        title: '资源描述',
        dataIndex: '资源描述',
        key: '资源描述',
        width:200,
      }, {
        title: '众智权重',
        dataIndex: '众智权重',
        key: '众智权重',
        width: 70,
      }, {
        title: '标注权重',
        dataIndex: '标注权重',
        key: '标注权重',
        width: 50,
      }
    ];
      const data = [{
        key: 'i',
        知识点名称: v.title,
        资源描述: v.r_desc,
        众智权重: v.people_mark_weight,
        标注权重: <p><Input size="small" placeholder="0-1之间"onClick={this.getIndex.bind(this,i)}onChange={this.InputChange.bind(this)}value={this.state.inputValue[i]}/>
                      <Button type="primary" size="small">确定</Button>
                 </p>
      }];
      
      return ( 
              <Table columns={columns} dataSource={data} pagination={false} showHeader={false} size="middle"/>            
      );}
    );

3、最终实现效果

 前端小白一只，此次经验希望能对遇到同类问题的小伙伴有所帮助~