javascript - 单击按钮时显示 2 个组件中的 1 个
问题描述
在父组件上,我尝试做 2 个按钮,每个按钮都会显示一个组件,第一个按钮显示 itemlist,第二个组件显示 itemlist2 但我似乎无法正确操作,我尝试按照这个示例进行操作(https ://codepen.io/PiotrBerebecki/pen/yaVaLK)即使我不确定它是否适合此类功能,这是我的 app.js 代码
class App extends Component {
state = {
one: false
};
handleClick(e) {
const userChoice = e.target.className;
this.setState({
userChoice
});
}
toggleDiv() {
this.setState({
one: !this.state.one
});
}
toggleDiv1() {
this.setState({
one: this.state.one
});
}
render() {
return (
<div>
<NavBar />
<div className="container-fluid">
<ServiceSelector toggleDiv={this.toggleDiv.bind(this)} toggleDiv1=
{this.toggleDiv1.bind(this)} />
{this.state.one == false ? <ItemList /> : <ItemList2 />}
</div>
</div>
);
}
}
class ServiceSelector extends React.Component {
toggleDiv() {
this.props.toggleDiv();
}
toggleDiv2() {
this.props.toggleDiv2();
}
render() {
return (
<div>
{" "}
<button onClick={this.toggleDiv.bind(this)}>sss </button>
<button onClick={this.toggleDiv1.bind(this)}>sss </button>
</div>
);
}
}
解决方案
其实这个功能
toggleDiv1() {
this.setState({
one: this.state.one
});
}
没用。
切换功能应该有一个
toggleFunc() {
this.setState({stateWatched = !this.state.stateWatched})
}
在两种情况下(设置true
或false
)都使用此功能。并且不要bind
在调用ServiceSelector
组件时,这是无意义的。
class App extends Component {
state = {
one: false
};
handleClick(e) {
const userChoice = e.target.className;
this.setState({
userChoice
});
}
toggleDiv() {
this.setState({
one: !this.state.one
});
}
render() {
return (
<div>
<NavBar />
<div className="container-fluid">
<ServiceSelector toggleDiv={this.toggleDiv.bind(this)} />
{this.state.one == false ? <ItemList /> : <ItemList2 />}
</div>
</div>
);
}
}
class ServiceSelector extends React.Component {
render() {
return (
<div>
{" "}
<button onClick={this.props.toggleDiv}>sss </button>
</div>
);
}
}
如果你想有 2 个按钮来处理切换。改变函数的逻辑。
function toggleTrue() {
this.setState({one: true})
}
function toggleFalse() {
this.setState({one: false})
}
然后像往常一样传递它(记得删除bind
子组件中的函数)
推荐阅读
- javascript - 当用户滚动时在 ReactJS 组件上添加/删除一个类
- spring-boot - 使用 WebClient 将带有标头的请求发送到第三方 api
- android - 如何制作自定义 ListView?
- sql - SQL 输入值 单个或多个值
- node.js - 谷歌云函数中的全局范围变量初始化
- php - 如何在 PHP 变量更新时切换 CSS 动画?
- php - php 数组和 str_replace 一起工作
- javascript - 使用 Jest 的 todo 功能
- java - 为简单的 REST Web 服务调整 SoapUI
- python - 生成 22 个字符的 uuid?