Question

当我单击一个按钮时，它会将我重定向到另一个组件（＃2），其中有两个状态，并根据哪个状态显示一个内容或另一个内容。组件（＃2）的默认状态为true，我需要知道的操作是单击组件（＃1）的按钮，将状态更改为false。

这是针对ReactJs应用的，我使用功能组件，挂钩，没有类组件

Thats the button code:
<Link to="/register">
<button className="btn btn-success btnVerde">
</button>
</Link>

Thats the component#2:
const [state, setState] = React.useState(true);
{state && <div1......../>}
{!state && <div2......./>}

我希望单击组件＃1中的按钮，它将默认状态为true重定向到组件＃2，并将其更改为false

Answer 1

您可以在Component1中处理状态，然后在onClick调用setState中使用相反的值更新值，如下所示：

<button onClick={() => setState({state: !state})}>Click</button>

并在component2中接收该值作为支持，例如：

const Component2 = ({showCustom}) => showCustom ? <span> Custom </span> : <span>No Custom</span>;

Answer 2

感谢@rcoro，这就是我解决问题＃1的方法：

const change = () => props.changingState(false);
<Link to="/register"><button onClick={change}className="btnPink">
         {t("talents_btnReserve")}
        </button>
        </Link>

component＃2：

const showTalentRegister = () => setState(true);
const showCompanyRegister = () => setState(false);

useEffect(() => {
if(props.booleanState){
  showCompanyRegister()
}
else {
  showTalentRegister()
}

}，[]）；

单击链接时，如何更改另一个组件的状态？

2 个答案: