通过单击按钮进行节更改
通过单击按钮进行节更改
提问于 2019-05-17 17:52:02
我正在制作一个网站反应反应带，我有一个部分，其中包含图表和按钮，其功能是取代上述图表与另一个图表包含更多的细节。然而，我正在努力制定一个具体的代码。
我尝试将图表放在一个单独的组件中，并通过在按钮上使用handleclick函数(使用'onclick')切换它的内容。
我真的对我的代码的清晰性没有信心，所以我尝试复制我在小提琴中做的更简单的事情。
class hello extends React.Component {
render() {
return (
<h2>hello</h2>
);
}
}
class bye extends React.Component {
render() {
return (
<h2>goodbye</h2>
);
}
}
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<div>
<div>
{this.state.components[hello]}
</div>
<button onClick={this.handleClick}>
switch
{this.setState({components:[<bye />]})}
</button>
</div>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);“切换”组件中的div应该在组件"hello“和”拜“之间切换。
实际上，应该显示的当前部分("hello")将被另一个部分(“拜”)替换为单击它们下面的按钮。
提前谢谢。
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-05-17 18:04:27
如果您只想通过单击按钮在两个组件之间切换，则可以使用条件呈现。将render方法更改为：
render(){
return (
<div>
{this.state.isToggleOn?<Hello />:<Bye />}
<button onClick={this.handleClick}>Switch</button>
</div>
}此外，将组件的名称保留为第一个字符，大写或react可能会引起抱怨。而使用基于Class的组件已经过时了。Hooks是现在最热门的东西。因此，尝试使用更多的Functional组件。
注意:我的答案假设您使用babel presets来转换jsx和es6语法。如果没有，去看看科林的答案。它也使用钩子。
Stack Overflow用户
发布于 2019-05-17 17:57:23
为什么不导入所有的部分视图并根据条件有条件地呈现它们？
{condition & <View1/> Stack Overflow用户
发布于 2019-05-17 17:58:37
您的代码中有一些错误。下面是一个使用条件呈现来做您想要的事情的示例：
import React, { useState } from "react";
import ReactDOM from "react-dom";
const Hello = () => {
return <h2>hello</h2>;
};
const Bye = () => {
return <h2>bye</h2>;
};
const App = () => {
const [toggled, setToggled] = useState(true);
const handleClick = () => {
setToggled(!toggled);
};
const render = () => {
if (toggled) {
return <Hello />;
}
return <Bye />;
};
return (
<div>
<button onClick={handleClick}>toggle</button>
{render()}
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56191327
复制相关文章
相似问题
腾讯云开发者
