Question

我正在使用一组连续的图像。在这些图像上方有一个文本框输入，基于输入，我需要启用/禁用图像？如何在React中做到这一点。

我尝试在图片标签中添加“ disable”，并且disabled = true，但两者均无效。

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

Answer 1

没有诸如“禁用”图像之类的东西。您只能禁用表单元素，因为它们是唯一的交互式html元素。请参阅w3c specification，以了解可以完全禁用哪些项目。

那是除非您编写自己的自定义定义来禁用图像。例如，您可以向图像添加一个类disabled，并使用CSS设置该类为灰色的样式。

您还可以将CSS与WebComponents结合使用，以使元素具有禁用的属性。您可以设置其禁用样式的样式。

另请参见docs中的<img />标签。

Answer 2

如果您的意思是隐藏/显示..您只是可以使用状态来禁用图片，即

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

如果禁用，则意味着使其变为灰色，不透明度低等，您可以使用状态：

style = this.state.disable？ {{style_disable}}：{{style_enable}}

如何在React中禁用图像

2 个答案: