Question

这是我的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>

Answer 1

您可以执行以下操作，首先将showButton字段设置为true，然后将onClick设置为false

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

  <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>

Answer 2

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>

对上述答案进行了小改动。您可以在onclick上启用和禁用它

在单击按钮时反应js按钮隐藏

2 个答案: