第二个待办事项编辑单击将在第一个待办事项上呈现文本区域

Question

在Chrome上，单击“第一个待办事项”的编辑按钮，然后单击“关闭”按钮将其关闭，然后在单击“第二个待办事项”的编辑按钮后，将在“第一个待办事项”上渲染文本区域，而不是保留它，并且在单击“编辑”按钮后也要关闭单击在Firefox上不起作用，有人可以建议出什么问题了以及可以做什么吗？谢谢！

    class Form extends Component {
      constructor(props) {
        super(props);
        this.state = {
            text: "",
            val: [],
            close: [],
            closeObj: {id: '', isEdit: false},
            idChk: 0
        }

      }


      handleEditClick = (e,id,text) => {
        let { val, close, closeObj, idChk } = this.state;
        val.push(id);
        this.setState({val});
        closeObj = Object.assign({}, closeObj);
        let chkId = close.findIndex(obj => {
          if(obj.id === id) {
            return id
          }
        })
        if(chkId === -1) {
          closeObj.id = id;
          closeObj.isEdit = !closeObj.isEdit;
          this.setState({closeObj});
          close.push(closeObj);
        }else {
          close[chkId].isEdit = !close[chkId].isEdit;
          this.setState({closeObj, close});
        }
        this.setState({closeObj: {id: '', isEdit: false}, idChk: id});
      }



     handleCloseClick = id => {
       let { close } = this.state;
        for(var i in close) {
          if(close[i].id === id) {
            close[i].isEdit = !close[i].isEdit;
            this.setState({close, idChk: id});
          }
        }
       }


     renderEdit(text, id) {
       return (
         <div>
         <TextField
             onChange={this.handleChange}
             onKeyDown={this.handleKeyDown}
             label=""
             margin="normal"
             value={text}
             color="secondary"
         />
         <Button variant="contained" size="small" style={{color: 'green'}}>
          <SaveIcon />
         </Button>
         <IconButton>
           <CloseIcon onClick={() => this.handleCloseClick(id)}/>
         </IconButton>
         </div>
       )
     }



      render() {
        const { text, idChk, close } = this.state;
        let closeBool = false;
        if( close.length !== 0 ) {
          for (var i in close ) {
            if(idChk === close[i].id) {
              closeBool = close[i].isEdit;
            }
          }
        }


        return (
         <div style={{display: "flex"}}>
          <div style={{margin: "auto", width: 400 }}>
          <TextField
              onChange={this.handleChange}
              onKeyDown={this.handleKeyDown}
              label=""
              margin="normal"
              fullWidth
              value={text}
              color="secondary"
          />
           <Paper elevation={1}>
           <div>
             {this.props.todos.map(todo => (
               <div key={todo.id}>
               {
                 ( this.state.val.includes(todo.id) && closeBool) ? this.renderEdit(todo.text, todo.id):
                 <EditButton todo={todo} val={val} text={text} close={this.state.close}
                             removeTodo={(todo) => this.removeTodo(todo)}
                             handleEditClick={(e, id, text) => this.handleEditClick(e, id, text)}

                             updateTodo={(todo) => this.updateTodo(todo)}
                 />
               }
              </div>
             ))}
           </div>
           </Paper>
         </div>
         </div>
        )
      }
    }