Question

我必须在点击时显示图像。如何在循环中执行此操作？每张图片在开始时都有一个状态：

imgDisplay: 'none'

然后我在点击时更改它，但是在循环中的每个元素上。如何为单个元素更改它？

handleShowPhoto = () => {
    this.setState({
        imgDisplay: 'block'
    });
};

            <tr key={photo.id}>
                <td><a href="#" onClick={this.handleShowPhoto}>{photo.title}</a></td>
                <td><img style={{display: this.state.imgDisplay}} src={photo.thumbnailUrl} alt=""/></td>
            </tr>

Answer 1

我可能会使用jQuery来选择元素列表，然后遍历该列表并相应地设置它们的状态。最后，将“this”设置为显示：阻止，就像你已经做的那样。

handleShowPhoto = () => {
    var allElements = jQuery('selector').each(function(){
        this.setState({
            imgDisplay: 'none'
        });
    });
    this.setState({
        imgDisplay: 'block'
    });
};

我用'#myTable＆gt;之类的东西替换“选择器” td＆gt; img'，你试图得到一个img标签列表。

原谅任何语法错误，我没有使用IDE atm：）

Answer 2

如果我正确理解了您的问题，那么您需要将点击的ID传递给州，然后将其与当前状态进行比较，如：

    handleShowPhoto = (data) => {
        this.setState({
            //imgDisplay: 'block', no need for this
            clickedID: data.id // create clickedID in state constructor as a string like clickedID: '' or null
        });
    };


        <tr key={photo.id}>
            <td><a href="#" onClick={this.handleShowPhoto.bind(this, photo)}>{photo.title}</a></td>
            <td><img style={photo.id === this.state.clickedID ? {display: 'block'} : {display: 'none'}} src={photo.thumbnailUrl} alt=""/></td>
        </tr>

如果你想让handleShowPhoto切换和处理多个图像，你的代码应该是这样的：

我们会这样做：filter()，indexOf()，Spread operator

    handleShowPhoto = (data) => {  clickedID should be an array in construcor like clickedID: []
     if(this.state.clickedID.indexOf(photo.id) !== -1){
        this.setState(prevState=>({ clickedID: prevState.clickedID.filter(id => id !== data.id)] })) //deleting clicked ID if it's already exist
     }else{
        this.setState(prevState=>({ clickedID: [...prevState.clickedID, data.id] })) adding new id 
     }
    };

      <tr key={photo.id}>
            <td><a href="#" onClick={this.handleShowPhoto.bind(this, photo)}>{photo.title}</a></td>
            <td><img style={this.state.clickedID.indexOf(photo.id) !== -1 ? {display: 'block'} : {display: 'none'}} src={photo.thumbnailUrl} alt=""/></td>
        </tr>

更改循环中一个元素的状态

2 个答案: