Question

我在功能组件内部定义了2个按钮，我需要通过检查一些条件来隐藏它们。

我知道没有像隐藏功能那样的属性，我可以发送true或false。

在线我可以看到大部分隐藏功能，这是通过单击按钮将id作为event.target.id传递的，然后是event.target.id.style.display = "none";。

在这里，我没有单击按钮，并且我不想得到裁判。

Answer 1

state ={
  button1Disabled:false,
  button2Disabled:false,
}

render(){
const {button1Disabled, button2Disabled} = this.state;
  return(
    <button onClick={() => this.setState({button1Disabled: !this.state.button1Disabled})}> Hide/Show button 1</button>
    <button onClick={() => this.setState({button2Disabled: !this.state.button2Disabled})} > Hide/Show button 2</button>

    {!button1Disabled && (<button> a button </button>)}
    {!button2Disabled && (<button> a button </button>)}
  )

}

Answer 2

您还可以使用类组件，因为使用状态会更有利，并且可以通过单击函数轻松地操作状态。

这是我可以给你的简短例子。

import React from 'react';

class Button extends React.Component {
    state = {
      showBtn: false
    };
  }

  toggleBtn = () => {
    this.setState({ showBtn: true});
  };

      hideBtn = () => {
    this.setState({ showBtn: false});
  };

  render() {
    return (
      <div>
        <h1 onClick={this.toggleBtn} >Click</h1>
        <h1 onClick={this.hideBtn}>Hide Button</h1>

        {this.state.showBtn ? <button>Show Button</button> : null}
      </div>
    );
  }
}

export default Button;

我还将与您分享代码，您可以在其中看到我对一个按钮所做的结果，但是对您可以对另一按钮进行同样的操作。

这是链接：-CodeSandbox

如何在反应中隐藏按钮（注意：我没有点击按钮）

2 个答案: