ReactJS：如何隐藏/取消隐藏切换列表项中的图像_Reactjs

ReactJS：如何隐藏/取消隐藏切换列表项中的图像

reactjs

ReactJS：如何隐藏/取消隐藏切换列表项中的图像,reactjs,Reactjs,我实现了一个React组件，它列出记录，并允许通过元素切换记录（隐藏和取消隐藏）我现在需要通过每个列表项的单独开关/按钮切换/隐藏/取消隐藏每个列表项的图像： hideUnhidePhoto(id) { const newData = this.state.data.map(item => { if(item.id === id) { return { ...item, photoVisible: !item.photoVisible};

我实现了一个React组件，它列出记录，并允许通过

元素切换记录（隐藏和取消隐藏）

我现在需要通过每个列表项的单独开关/按钮切换/隐藏/取消隐藏每个列表项的图像：

  hideUnhidePhoto(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, photoVisible: !item.photoVisible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }

我目前有以下代码来切换每个列表项的图像显示：

  hideUnhidePhoto(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, photoVisible: !item.photoVisible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }

我有一个锚元素，它允许通过点击事件控制图像显示：

<a style={{color: 'red'}} onClick={this.hideUnhidePhoto.bind(this, post.id)}>
Hide/Unhide Photo
</a>


隐藏/取消隐藏照片

问题：

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


class Focus extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      shown: true,
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", title: "my first title", image: "http://localhost/1.png", visible: true , photoVisible: true},
        { id: "2", title: "my second title", image: "http://localhost/2.png", visible: true, photoVisible: true},
        { id: "3", title: "my third title", image: "http://localhost/3.png", visible: true, photoVisible: true}
      ]
    });
  }


  toggle(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, visible: !item.visible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }





  hideUnhidePhoto(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, photoVisible: !item.photoVisible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }


  render() {
    return (
      <div>
        <label>
          <ul>
            {this.state.data.map((post, i) => (
              <li key={i}>
                <div style={{ display: post.visible ? "none" : "block"}}> 

<b>Post Data:</b> {post.title} --{post.id}   <br />

<a style={{color: 'red'}} onClick={this.hideUnhidePhoto.bind(this, post.id)}> Hide/Unhide Photo </a><br />

<div style={{ display: post.visible1 ? "none" : "block"}}> 

<img src={post.image} />

</div>

</div>
                <button onClick={this.toggle.bind(this, post.id)}>Toggle ({post.id}) </button>
                <br />
              </li>
            ))}
          </ul>
        </label>
      </div>
    );
  }
}

我的问题是，每次单击“隐藏/取消隐藏照片”按钮，而不是仅切换照片的显示，单击此按钮会导致列表中的所有项目隐藏：

我的尝试：

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


class Focus extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      shown: true,
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", title: "my first title", image: "http://localhost/1.png", visible: true , photoVisible: true},
        { id: "2", title: "my second title", image: "http://localhost/2.png", visible: true, photoVisible: true},
        { id: "3", title: "my third title", image: "http://localhost/3.png", visible: true, photoVisible: true}
      ]
    });
  }


  toggle(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, visible: !item.visible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }





  hideUnhidePhoto(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, photoVisible: !item.photoVisible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }


  render() {
    return (
      <div>
        <label>
          <ul>
            {this.state.data.map((post, i) => (
              <li key={i}>
                <div style={{ display: post.visible ? "none" : "block"}}> 

<b>Post Data:</b> {post.title} --{post.id}   <br />

<a style={{color: 'red'}} onClick={this.hideUnhidePhoto.bind(this, post.id)}> Hide/Unhide Photo </a><br />

<div style={{ display: post.visible1 ? "none" : "block"}}> 

<img src={post.image} />

</div>

</div>
                <button onClick={this.toggle.bind(this, post.id)}>Toggle ({post.id}) </button>
                <br />
              </li>
            ))}
          </ul>
        </label>
      </div>
    );
  }
}

import React，{Component，Fragment}来自“React”；
从“react dom”导入{render}；
类焦点扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
显示：是的，
};
}
componentDidMount（）{
这是我的国家({
数据：[
{id:“1”，标题：“我的第一个标题”，图像：http://localhost/1.png“，可见：真，光可见：真}，
{id:“2”，标题：“我的第二个标题”，图片：http://localhost/2.png“，可见：真，光可见：真}，
{id:“3”，标题：“我的第三个标题”，图片：http://localhost/3.png，可见：真，光可见：真}
]
});
}
切换（id）{
const newData=this.state.data.map（项=>{
如果（item.id==id）{
返回{…项，可见：！项.可见}；
}
退货项目；
})
这是我的国家({
数据：新数据
});
}
希登希德照片（id）{
const newData=this.state.data.map（项=>{
如果（item.id==id）{
返回{…item，photoVisible:！item.photoVisible}；
}
退货项目；
})
这是我的国家({
数据：新数据
});
}
render（）{
返回(

{this.state.data.map（（post，i）=>(

发布数据：{Post.title}--{Post.id}

隐藏/取消隐藏照片

切换（{post.id}）



))}

);
}
}

如果我正确理解了您的问题，那么您的渲染函数中似乎有一些小错误，即：

style={{ display: post.visible1 ? "none" : "block"}}

据我所见，您的

post

项目上没有

visible1

字段，这将导致图像切换出现意外行为。您可以考虑修改您的<代码> ReDead（）/Cuff>函数，详细注释如下：

render() {
return (
  <div>
    <label>
      <ul>
        {this.state.data.map((post, i) => (
          <li key={i}>
            <div style={{ display: post.visible ? "none" : "block"}}> 
                <b>Post Data:</b> {post.title} -- {post.id}   <br />

                { /* Revise event handler binding with arrow function as shown. 
                Also consider a change from <a> to something like <span> to ensure 
                no default click behavour on <a> happens if href were added */ }
                <span style={{color: 'red'}} 
                      onClick={ () => this.hideUnhidePhoto(post.id) }>
                Hide/Unhide Photo
                </span>

                <br />

                {/* Update image display to be controlled via post.photoVisible 
                field */ }
                <div style={{ display: post.photoVisible ? "block" : "none"}}> 
                    <img src={post.image} />
                </div>
            </div>
            { /* I prefer to use arrow functions in general to make the code 
            a little more readable */ }
            <button onMouseDown={ () => this.toggle(post.id) }>Toggle ({post.id}) </button>
            <br />
          </li>
        ))}
      </ul>
    </label>
  </div>
);
}

更新下面是一个正在运行的JSFIDLE，演示了解决方案：

希望对您有所帮助

实现这一点最简单的方法是在构造函数中包含一种显示属性样式，并使用触发器函数触发它

类的内部构造函数

this.mystyle={ 显示：“无” };

通过以下方式提供此样式的图像：

img src=“…”alt=“…”style={this.mystyle}/

按此类型的代码切换图像

this.mystyle={display:'inline'}

感谢Dacre爵士迄今为止的贡献。我已经实施了您的解决方案，但仍然存在问题。例如，如果我在第一个切换的记录上，当我切换其中的图像按钮时。不只是隐藏/取消隐藏图像，它只会关闭切换按钮的所有记录还没有，它显示错误包。js:98745未捕获引用错误：photoVisible未定义谢谢，先生，错误已经消失。这是现在的问题，如果打开toggle1并单击togge1记录中图像的按钮，它将关闭toggle1，而不是隐藏/取消隐藏图像。如果打开toggle2并单击图像按钮，它将打开toggle2和toggle2等。我认为父切换和子切换（图像切换）之间存在Id问题。我仍然感谢你迄今为止的努力。仍然指望你的帮助，sirOk-意识到了问题所在。很可能，点击事件同时在按钮和跨度上触发（由于图像被隐藏，导致按钮被放置在光标下），一种解决方案是使用

onMouseDown

防止如上所示的“碰撞”-希望能有所帮助！谢谢你，达克雷先生。我很感激。请告诉我在新的帖子里还有一个问题。请你看看能不能帮上忙。谢谢