在父组件上,我正在尝试做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>
);
}
}
我不太确定你想做什么,但我会尝试一下。
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} toggleDiv1={this.toggleDiv1} />
{this.state.one == false ? <ItemList /> : <ItemList2 />}
</div>
</div>
);
}
}
class ServiceSelector extends React.Component {
render() {
return (
<div>
{" "}
<button onClick={this.props.toggleDiv}>sss </button>
<button onClick={this.props.toggleDiv1}>sss </button>
</div>
);
}
}
使用箭头函数无需键入this.bind,因为它为您进行绑定
如果有帮助,请告诉我
实际上,这个功能
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
函数)