爲什麼我的React顯示/隱藏標籤沒有正確更新？

Question

標籤是可編輯的：單擊標籤時，將顯示輸入文本字段並隱藏標籤字段。在文本字段丟失焦點後，將顯示標籤字段並隱藏文本字段。我有問題標籤不更新與新的文本輸入值。

添加組件按鈕將創建一個新組件並將其放置在列表頂部。有問題，新創建的組件位於顯示輸入文本和標籤隱藏的列表下方。

添加了多個新組件後，當我點擊其中一個標籤時，文本字段會自動更新爲其他文本。我試圖調試它，但無法解決它。

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; 
} 

Answer 1

它看起來像你的錯誤是在你的textChanged功能，試試這個：

textChanged(index) { 
 
    console.log("txtval: " + this.textInput.value); 
 
    // this.state.arr[index] = this.textInput.value; <= bug 
 
    const newArray = [...this.state.arr]; 
 
    newArray[index] = this.textInput.value; 
 
    this.setState({ 
 
    arr: newArray, 
 
    text: this.textInput.value 
 
    }); 
 
    // console.log(this.state.arr); <= don't check here, check in your render method 
 
}

兩個變化：

1. 通過this.setState修改狀態，不通過this.state.arr。
2. 設置狀態在一個this.setState行動爲更乾淨的代碼。
3. 註釋掉this.state的控制檯日誌，因爲直到下一個生命週期，狀態還沒有完全更新。相反，控制檯在您的渲染方法中記錄狀態。