ReactJS - 爲動態生成的項目設置唯一狀態

Question

我從服務器獲取一些數據以填充項目列表，並且每個項目都有一個綁定到項目ID的onClick事件，這會更改點擊時禁用的UI。

我的問題是，在用戶界面的變化上的第一次點擊禁用完美的，但是當我去點擊下一個項目它重置第一，所以只有一個在同一時間關閉按鈕。我該如何做到這一點，以便我可以禁用所有我想要的項目，而不需要重置以前的項目？

這裏是我的組件：

class Video extends Component { 
constructor() { 
super() 
    this.state = { 
    isDisabled: false 
} 
} 


handleClick(frag, voted, event){ 
event.preventDefault() 

this.setState({ 
    isDisabled: { 
     [frag]: true 
    } 
}) 
} 

片斷我在改變殘疾人按鈕

<button onClick={this.handleClick.bind(this, frags.id, frags.voted)} disabled={this.state.isDisabled[frags.id]} className="rating-heart-2"> 
    <i className="fa fa-heart" aria-hidden="true"></i> 
</button> 

我真的很感激所有提示UI回報！

Answer 1

看起來，當您調用setState時，您將覆蓋isDisabled的先前值。

你可以做這樣的事情：

handleClick(frag, voted, event){ 
event.preventDefault() 

this.setState({ 
    isDisabled: { 
     ...this.state.isDisabled, 
     [frag]: true 
    } 
}) 
} 

Answer 2

您所提供的代碼是一個有點混亂，因爲在JSX你this.state.hasRated禁用按鈕，在handleClick你有一個isDisabled對象。

我遵循jsx的方法，並添加了frag id爲hasRated的對象，其值爲true以禁用每個單擊它的按鈕。

您可以運行下面的代碼片段看到代碼的輸出：

class Example extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     frags: [], 
 
     hasRated: {} 
 
    }; 
 

 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 

 
    componentDidMount() { 
 
    setTimeout(() => { 
 
     this.setState({ 
 
     frags: [{ 
 
      id: 1, 
 
      voted: false 
 
     }, { 
 
      id: 2, 
 
      voted: false 
 
     }, { 
 
      id: 3, 
 
      voted: false 
 
     }] 
 
     }); 
 
    }, 500); 
 
    } 
 

 
    handleClick(id, voted) { 
 
    return (event) => { 
 
     this.setState({ 
 
     hasRated: { 
 
      ...this.state.hasRated, 
 
      [id]: true 
 
     } 
 
     }); 
 
    } 
 
    } 
 

 
    render() { 
 
    const items = this.state.frags.map(frag => (< 
 
     button 
 
     key={frag.id} 
 
     onClick = { 
 
     this.handleClick(frag.id, frag.voted) 
 
     } 
 
     disabled = { 
 
     this.state.hasRated[frag.id] 
 
     } 
 
     className = "rating-heart-2" > 
 
     Button < 
 
     /button> 
 
    )); 
 

 
    return (
 
     <div> 
 
     {items} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(< Example/> , document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="container"></div>