[英]Changing the colour of specific elements in Reactjs when clicking a button
I want to be able to change the colour of some elements on my webpage to make it more accessible.我希望能够更改网页上某些元素的颜色以使其更易于访问。
class App extends Component {
render() {
return (
<React.Fragment>
<div>This is a button</div>
<button>Click me!</button>
</React.Fragment>
);
}
}
If I had something like this in React, for example, how would I change the background colour of the div to red and the background of the button to blue when clicking the button?例如,如果我在 React 中有类似的东西,我如何在单击按钮时将 div 的背景颜色更改为红色,将按钮的背景更改为蓝色? I have tried to use ref but I'm not too confident so any help would be appreciated, thank you.
我曾尝试使用 ref 但我不太自信,因此将不胜感激,谢谢。
class App extends Component {
constructor(props) {
super(props);
this.state = {
divColor: "white",
buttonColor: "white"
};
}
handleButtonClick = () => {
this.setState({
divColor: "red",
buttonColor: "blue"
})
}
render() {
return (
<React.Fragment>
<div style={{background: this.state.divColor}}>This is a button</div>
<button
style={{background: this.state.buttonColor}}
onClick={this.handleButtonClick}
>
Click me!
</button>
</React.Fragment>
);
}
}
The new code:新代码:
Simple explanation:简单解释:
handleChangeBackground() {
this.setState({ bgColor: '#000' });
}
<div style={{ backgroundColor: this.state.bgColor }} className="articleParent">
<div>Article Content Section</div>
<colorButton handleBackground={this.handleChangeBackground} />
</div>
Inside of colorButton component: colorButton 组件内部:
render() {
return <Button onClick={this.props.handleBackground}>Change Color</Button>
}
The child is changing the background based on purely on props firing the function.孩子正在改变背景,纯粹是基于发射 function 的道具。
This might be wrong, I'm between conferences XD If not the case, I hope it helps!这可能是错误的,我在会议之间 XD 如果不是这样,我希望它有所帮助!
You can conditionally add/remove classes based on a state value.您可以根据 state 值有条件地添加/删除类。
function App() {
const [theme, setTheme] = useState('default');
handleClick = () => {
setTheme('red');
}
return (
<React.Fragment>
<div className={theme === 'red' ? 'red-background': 'default-background'}>This is a button</div>
<button onClick={handleClick}>Click me!</button>
</React.Fragment>
);
}
And then in your CSS you would have the classes defined然后在您的 CSS 中,您将定义类
.red-background {
background: red;
}
.default-background {
background: white;
}
If you have lots of classes on your component, this is a useful package for conditionally joining class names together.如果您的组件上有很多类,这是一个有用的 package 有条件地将 class 名称连接在一起。 https://github.com/JedWatson/classnames
https://github.com/JedWatson/classnames
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.