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

淩亂°似流年 2022-05-31 01:26 262阅读 0赞

### 1、问题描述 ###

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

![SouthEast][]![SouthEast 1][]

### 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数组
       }

### 3、最终实现效果 ###

![SouthEast 2][]![SouthEast 3][]

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

[SouthEast]: https://img-blog.csdn.net/20180202170104229?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvREZGMTk5Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220531/16b02ba55c624b15806e25da7a10dafa.png
[SouthEast 2]: https://img-blog.csdn.net/20180202174432002?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvREZGMTk5Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 3]: /images/20220531/6567687a9ec542c4aec6f28d29104f37.png