反應：在所選圖像周圍添加突出顯示的邊框

Question

當我選擇它時，我需要圖片周圍的邊框。因此，如果我有6張照片並選擇3張，我希望在這些圖像周圍突出顯示邊框。問題是，我該怎麼做？編輯：我正在使用反應這個困境。

Answer 1

這取決於你想如何在應用中跟蹤狀態.. here是跟蹤父組件的狀態的例子。基本上你有一個單獨的父App組件，它跟蹤每個圖像的狀態，然後是一個Image組件，該組件可以使用或不使用邊框來呈現，這取決於作爲道具傳遞的App狀態片段。請參閱代碼以瞭解我的意思。另一種方法是讓活動狀態存在於每個圖像組件本身內。

該代碼有一些有趣的功能，主要是由於利用ES6的幾個方面更加簡潔，以及React's immutability helper幫助以不可變的方式更新狀態數組，以及lodash的times方法來協助創建我們的初始狀態數組。

碼（部分縮進的得到了來自的jsfiddle拷貝有點糊塗..）：

function getImage() { 
    return { active: false }; 
} 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { images: _.times(6, getImage) }; 
    this.clickImage = this.clickImage.bind(this); 
    } 
    clickImage(ix) { 
    const images = React.addons.update(this.state.images, { 
     [ix]: { $apply: x => ({ active: !x.active}) } 
    }) 
    this.setState({ images }); 
    } 
    render() { 
    const { images } = this.state; 
    return (
     <div> 
     { images.map((image, ix) => 
      <Image 
       key={ix} 
       ix={ix} 
       active={image.active} 
       clickImage={this.clickImage} />) } 
     </div> 
    ); 
    } 
}; 

class Image extends React.Component { 
    render() { 
    const { ix, clickImage, active } = this.props; 
    const style = active ? { border: '1px solid #021a40' } : {}; 
    return <img 
       style={style} 
       src={`https://robohash.org/${ix}`} 
       onClick={() => clickImage(ix)}/>; 
    } 
} 

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

然後是什麼樣子：

Answer 2

只需爲點擊添加一個「選定」類的事件處理程序，然後將該選定類設置爲在CSS中具有邊框。

.selectableImg { 
 
    border: solid 1px transparent; 
 
    margin: 10px; 
 
} 
 

 
.selectableImg.selected { 
 
    border: solid 1px blue; 
 
} 
 

<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> 
 
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> 
 
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> 
 
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> 
 

 
<script> 
 
    var images = document.querySelectorAll(".selectableImg"); 
 
    
 
    images.forEach(function(i) {i.addEventListener("click", function(event) { 
 
    i.classList.toggle("selected"); 
 
    })}); 
 
    </script>