Блог

Главная - Вопросы по программированию - Как отключить изображения в React

Как отключить изображения в React

#reactjs #react-native

#reactjs #react-native

Вопрос:

Я использую набор изображений if подряд. Над этими изображениями есть текстовое поле для ввода, и на основе ввода мне нужно включить / отключить изображения? Как это сделать в React.

Я попытался добавить «отключить» к тегу изображения и disabled = true, но оба не сработали.

 const IBox = props => 
  <div  style={props.styles.imageContainer} >
    <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span >amp;nbsp;</span>
    <img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span>amp;nbsp;</span>
    <img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span>amp;nbsp;</span>
    <img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
  </div>
export default IBox;

Комментарии:

1. Что должно произойти, если вы отключите изображения? Должны ли они исчезнуть? Они показывают что-то еще?

2. Что вы подразумеваете под «включить / отключить изображения»? пожалуйста, объясните подробнее, также в react-native нет тега div

3. @VincentRolea Мне просто нужно знать, как отключить эти изображения.. У меня есть поле ввода, при изменении состояния этого ввода я отключу эти изображения…

4. Что для вас значит «отключить» изображение? Я могу видеть, что должно делать отключение ввода, но не изображения.

Ответ №1:

Не существует такого понятия, как «отключение» изображений. Вы можете отключить только элементы формы, поскольку они являются единственными интерактивными элементами html. Смотрите спецификацию w3c, чтобы увидеть, какие элементы можно точно отключить.

Это если только вы не напишете свое собственное определение для отключения изображений. Например, вы могли бы добавить класс disabled к изображению и сделать этот класс выделенным серым цветом, используя CSS.

Вы также могли бы объединить CSS с Web components, чтобы получить элемент с отключенным атрибутом. Вы могли бы изменить его отключенный стиль.

Смотрите также docs для <img /> тега.

Комментарии:

1. предположим, если я заключу каждое изображение в тег span, смогу ли я это отключить?

2. @JokerBean вы можете, но у span также нет возможности отключить. Не могли бы вы подробнее рассказать о том, что, по вашему мнению, «отключенное» состояние должно делать для img-элемента?

3. @Webber нравится делать непрозрачность изображения равной 0

4. @JokerBean, итак, это один из вариантов использования того, что я уже описал в своем ответе; присвоите изображению имя класса disabled на основе некоторого условия, а затем оформите его img.disabled в соответствии со стилями, которые вы описываете.

Ответ №2:

Если вы имеете в виду скрыть / показать .. вы просто можете использовать state для отключения вашего изображения, т. Е.

 {this.state.img1 amp;amp; <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}

если под отключением вы подразумеваете сделать его серым, с низкой непрозрачностью и т.д… вы можете использовать состояние :

стиль= this.state.отключить? {{style_disable}}: {{style_enable}}

Комментарии:

1. OP никогда не просил скрывать изображения. Этот ответ основан на больших предположениях. Несмотря на популярность в голосованиях и обычную процедуру в react, это все равно неправильный ответ.

2. @Webber то, что вы говорите, не обязательно правильно, поскольку часть ответа, когда кто-то спрашивает, заключается в том, чтобы помочь ему понять, что ему действительно нужно. Итак, мы не ставим цели заработать голоса, мы пытаемся помочь кому-то справиться с проблемой!

Ответ №3:

Используйте <input /> вместо <img /> , как в этом примере. Вы можете предоставить ту же функциональность с type="image" атрибутом. Таким образом, вы можете использовать disabled атрибут.

 <input
  type="image"
  disabled={disabled}
/>