点击按钮显示和隐藏页面的某一部分

150 阅读1分钟

1-设置初始状态

`
const [ifShow, setIfShow] = useState(true);
`

2-对点击的图标设置显示和隐藏,添加点击事件

`
 <div className={styles.title}>
    供需流程记录
     {ifShow == true && (
        <UpOutlined
          style={{ color: '#00B4ED', marginLeft: '15px' }}
           onClick={() => {
              setIfShow(!ifShow);
            }}
         />
     )}
     {ifShow == false && (
        <DownOutlined
           style={{ color: '#00B4ED', marginLeft: '15px' }}
           onClick={() => {
              setIfShow(true);
            }}
         />
       )}
   </div>
   //初始状态展示一个图标,点击按钮改变状态
`

3-添加条件判断,显示和隐藏某些内容

`
{ifShow == true && 
    (<div>
        展示内容
    </div>)
`