РЕАКТ: Добавить выделенную рамку вокруг выбранного изображения

Question

Я хочу, чтобы рамка вокруг изображения была выбрана. Поэтому, если у меня есть 6 фотографий и выберите 3, я хотел бы выделить границы вокруг этих изображений. Вопрос в том, как я могу это сделать? EDIT: Я использую React для этой дилеммы.

Answer 1

Это зависит от того, как вы хотите, чтобы отслеживать состояние вашего приложения .. here пример, который отслеживает состояние в родительском компоненте. По сути, у вас есть компонент родительского компонента, который отслеживает состояние для каждого изображения, а затем компонент изображения, который отображается либо с границей, либо без нее, в зависимости от части состояния приложения, которая передается в виде опоры. Обратитесь к коду, чтобы узнать, что я имею в виду. Альтернативой было бы включение активного состояния в каждый компонент изображения.

код имеет ряд интересных особенностей в основном за счетом привлечения несколько аспектов ES6 быть более краткими, а также React's immutability helper помочь обновить состояние массива в неизменном пути, и times метода lodash, чтобы помочь в создании нашего инициала массив состояний.

кодекс (часть отступа получил немного запутался в копии от 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>