在父组件上,我试图做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
)。并且在ServiceSelector
组件中调用时不要bind
,这是无意义的。
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 - 单击按钮时显示 2 个组件中的 1 个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54975909/