时间戳

首页 > 解决方案 > 单击按钮时反应js按钮隐藏

reactjs - 单击按钮时反应js按钮隐藏

问题描述

这是我的 reactjs 按钮代码如何在单击按钮时隐藏

<div className='chat-bubble animated bounceInLeft' style={{display:'none'}}>
            <div><img src={giabot} alt="" className="round"/></div>
          <div className="chat-content"> {chatData.text[3]}<br/>
            <div className="btn-group">
            {
              chatData.values.map((obj, index) => {
                return (
                  <button className='button' onClick={this.buttonSubmit} key={index} value={obj}>{obj}</button>
                )
              })
            }
            </div>
          </div>
        </div>

标签： reactjs

解决方案

buttonSubmit = ()=> {
this.setState({ showButton: !this.state.showButton });
},

<div className='chat-bubble animated bounceInLeft' style={{display:'none'}}>
    <div><img src={giabot} alt="" className="round"/></div>
  <div className="chat-content"> {chatData.text[3]}<br/>
    <div className="btn-group">
    {
      chatData.values.map((obj, index) => {
        return (
          {showButton && (
          <button className='button' onClick={this.buttonSubmit} key={index} value={obj}>{obj}</button>
        )}
        )
      })
    }
    </div>
  </div>
</div>

对上述答案的一个小改动。您可以在单击时启用和禁用它

推荐阅读