Reactjs 为什么我的显示/隐藏标签更新不正确？

标签可编辑：单击标签时，将显示输入文本字段，标签字段隐藏。文本字段失去焦点后，将显示标签字段并隐藏文本字段。我有一个问题，标签不更新新的文本输入值

“添加组件”按钮将创建一个新组件，并将其放在列表的顶部。出现问题，新创建的组件位于显示输入文本且隐藏标签的列表下方

添加多个新组件后，当我单击其中一个标签时，文本字段将自动更新为其他文本。我试图调试它，但无法解决它

import React from 'react';  
import FontAwesome from 'react-fontawesome'; 

export default class Dynamic extends React.Component {
  constructor() {
    super(); 
    this.state = { 
      arr: [],
      text:"LABEL",
      saveDisabled: true, 
      editing: []
    };
  }

  handleSort(sortedArray) {
    this.setState({
      arr: sortedArray
    });
  }

  save(){  
  }

  closePopup() { 
  }

  handleAddElement() { 
    this.textInput.value : 'LABEL';
    this.state.arr.unshift('LABEL');

    this.setState({ 
      saveDisabled: false,
    });   
  }

  handleRemoveElement(index) {
    const newArr = this.state.arr.slice();
    newArr.splice(index, 1);

    this.setState({
      arr: newArr,
      saveDisabled: false
    });
  }

  changeLabel(index){     
    this.setState({ 
      saveDisabled: false 
    });
    console.log(index);
    this.state.editing[index] = true;
    console.log("changelabel");
  }

  textChanged(index) {
    console.log("txtval: "+this.textInput.value);
    this.setState({ text: this.textInput.value});
    this.state.arr[index] = this.textInput.value;
     this.setState({
       arr: arr
     });
    console.log(this.state.arr);
  }

  inputLostFocus(index) { 
    this.state.editing[index] = false;
  }

  keyPressed(event) {
    if(event.key == 'Enter') {
      this.inputLostFocus();
    }
    this.inputLostFocus();
    console.log("key");
  }

  render() {
    function renderItem(num, index) {

        return ( 
          <DemoItem  className="dynamic-item" > 
              <FontAwesome className='th' name='  th' onClick={this.handleRemoveElement.bind(this, index)}/>
              <div name="name" className={(index==0)||this.state.editing[index] ? "hideElement": "displayElement"} onClick={this.changeLabel.bind(this,index)}>{this.state.arr[index]}</div>
              <input autofocus name="name" type="text" className={(index==0)||this.state.editing[index] ? "displayElement": "hideElement"} onChange={this.textChanged.bind(this, index)} onBlur={this.inputLostFocus.bind(this,index)}
              onKeyPress={this.keyPressed.bind(this,index)} defaultValue={this.state.arr[index]} ref={(input) => {this.textInput = input;}} />  
              <FontAwesome className='trash-o' name='trash-o' onClick={this.handleRemoveElement.bind(this, index)}/>
         </DemoItem>
        ) 
    } 

    return ( 
      <div className="demo-container">
        <div className="dynamic-demo">
          <h2 className="demo-title">
            Tasks
            <button disabled={this.state.saveDisabled} onClick={::this.save}>Save</button>
            <button onClick={::this.handleAddElement}>Add Component</button>
          </h2>
          <Sortable className="vertical-container" direction="vertical" dynamic>
            {this.state.arr.map(renderItem, this)}   
          </Sortable> 
        </div>
      </div>
    );
  }
}


displayElement {
  display: inline;
}
.hideElement{
  display: none;
}  

从“React”导入React；
从“react FontAwesome”导入FontAwesome；
导出默认类动态扩展React.Component{
构造函数（）{
超级（）；
this.state={
arr:[]，
文字：“标签”，
saveDisabled:true，
编辑：[]
};
}
handleSort（SorterDarray）{
这是我的国家({
阿瑞：达瑞
});
}
save（）{
}
closePopup（）{
}
handleAddElement（）{
this.textInput.value:'LABEL'；
this.state.arr.unshift（'LABEL'）；
这个.setState（{
saveDisabled:false，
});   
}
handleRemoveElement（索引）{
const newArr=this.state.arr.slice（）；
新排列拼接（索引1）；
这是我的国家({
阿尔：纽阿尔，
saveDisabled:false
});
}
更改标签（索引）{
这个.setState（{
saveDisabled:false
});
控制台日志（索引）；
this.state.editing[index]=true；
控制台日志（“变更标签”）；
}
文本更改（索引）{
log（“txtval:+this.textInput.value”）；
this.setState（{text:this.textInput.value}）；
this.state.arr[index]=this.textInput.value；
这是我的国家({
啊:啊
});
console.log（this.state.arr）；
}
inputLostFocus（索引）{
this.state.editing[index]=false；
}
按键（事件）{
如果（event.key=='Enter'）{
this.inputLostFocus（）；
}
this.inputLostFocus（）；
控制台日志（“键”）；
}
render（）{
函数renderItem（num，index）{
报税表（
{this.state.arr[index]}
{this.textInput=input；}}/>
) 
} 
报税表（
任务
拯救
添加组件
{this.state.arr.map（renderItem，this）}
);
}
}
显示元素{
显示：内联；
}
希迪伦先生{
显示：无；
}  

看起来您的bug出现在

textChanged

函数中，请尝试以下操作：

textChanged（索引）{
log（“txtval:+this.textInput.value”）；
//this.state.arr[index]=this.textInput.value；嗨，斯科特，谢谢你的提示！这很有帮助。我尝试调试，textChanged（index）的函数引用了this.textInput.value，它与正确的数组索引不匹配。你知道我是否可以为每个输入字段设置特定的ref id/类名，因为我正在使用{this.state.arr.map（renderItem，this）}要在renderItem（）中呈现重复的组件，可以为每个输入字段设置特定的ref值。可以设置任意数量。我是否回答了您的问题，您是否可以接受我的答案？