如何实现一个可以处理其子组件中所有事件的React容器?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现一个可以处理其子组件中所有事件的React容器?相关的知识,希望对你有一定的参考价值。
假设容器包含3个按钮:
<Container>
<Button1/> <Button2> <Button3/>
</Container>
默认情况下,所有按钮都处于“正常”状态。如果我点击Button1,我想让Button1变为'Active'状态(具有纯色背景),Button2和Button3变为'Inactive'状态(带有灰色边框)。
在React中实现这一目标的最佳方法是什么?
答案
Name是要在按钮中使用的有效html属性。如果您想使用React来控制它,您可以简单地将状态属性归因于所选按钮的名称。使用该状态,您可以控制disabled
属性以及类名。
this.state = {
activeButton: null
};
onButtonClick = (e) => {
const { name } = e.target;
this.setState({
activeButton: name
});
};
render() {
const { activeButton } = this.state;
return (
<Component>
<button
className={`${activeButton === 'one' && 'active' || ''}`}
onClick={this.onButtonclick}
name="one"
disabled={activeButton !== 'one'}>
Button 1
</button>
<button
className={`${activeButton === 'two' && 'active' || ''}`}
onClick={this.onButtonclick}
name="two"
disabled={activeButton !== 'two'}>
Button 2
</button>
<button
className={`${activeButton === 'three' && 'active' || ''}`}
onClick={this.onButtonclick}
name="three"
disabled={activeButton !== 'one'}>
Button 2
</button>
</Component>
);
}
另一答案
您可以考虑将按钮用作子组件
class Button extends React.Component {
constructor(props) {
super(props);
this.setActive = this.setActive.bind(this);
}
setActive() {
this.props.onClick(this.props.value);
}
render() {
return (<button onClick={this.setActive} className={this.props.active ? 'active' : ''}>
{this.props.children}
</button>);
}
}
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {
active: 0,
};
this.buttons = Array.from({ length: 5 }).map((v, index) => index);
this.setActive = this.setActive.bind(this);
}
setActive(active) {
this.setState({ active })
}
render() {
return (<div>
{
this.buttons.map((value) => (<Button key={value} value={value} active={this.state.active === value} onClick={this.setActive}>Button #{value}</Button>))
}
</div>);
}
}
另一答案
使您的组件看起来如下所示,这肯定会起作用:
class App extends React.Component {
constructor(props) {
super(props)
this.setActiveBackground = this.setActiveBackground.bind(this);
this.state = {
selectedCircle: {
},
};
}
setActiveBackground(name, event) {
let selected = this.state.selectedCircle;
selected = {};
selected[name] = this.state.selectedCircle[name] == "selected" ? "" : "selected";
this.setState({selectedCircle: selected});
}
render() {
return (
<div className="container">
<div className="row">
<div className="card-panel white">
<div className="center">
<p>Set Active background in selected button</p>
<button onClick={this.setActiveBackground.bind(this, "first")} className={this.state.selectedCircle["first"]}>Button 1</button>
<button onClick={this.setActiveBackground.bind(this, "second")} className={this.state.selectedCircle["second"]}>Button 2</button>
<button onClick={this.setActiveBackground.bind(this, "third")} className={this.state.selectedCircle["third"]}>Button 3</button>
</div>
</div>
</div>
</div>
);
}
}
检查演示输出
以上是关于如何实现一个可以处理其子组件中所有事件的React容器?的主要内容,如果未能解决你的问题,请参考以下文章