我想使用类和onclick函数更改文本颜色，但onclick功能不起作用

Question

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Changecolor extends Component{
changeme=()=>{<p className='redme'>You Got Me Now Im Red as Tomato Thank you</p>;}
render(){
return(
<div className='testclass'>
<h1>Click me to change my Color</h1>
<p>Hi Please change my color to red Click below button</p>
<button onClick={this.changeme}>Click Me to change Color</button>
</div>
);
}
}
export default Changecolor;

Answer 1

这个怎么样。

constructor(props){
super(props)
this.state = { 
clicked:false
}
}
changeme = () =>{
this.setState({clicked:true})
}

const clickedText = "You Got Me Now Im Red as Tomato Thank you",
const clickedClassName = "redme"

render(){
return(
<div className='testclass'>
<h1>Click me to change my Color</h1>
{clicked ? <p className={clickedClassName}>{clickedText}</p> : <p>Hi Please change my color to red Click below button</p>}

<button onClick={this.changeme}>Click Me to change Color</button>
</div>
);
}

Answer 2

如果您想在changeme点击处理程序中返回JSX，您应该编写如下代码：changeme=()=> <p className='redme'>You Got Me Now Im Red as Tomato Thank you</p>(不带大括号(

为了在单击按钮时更改任何东西的颜色，这里的想法是在状态中存储一个标志，并根据该标志的值添加样式。

例如，我想在单击按钮时将此<p>标记的文本更改为红色。

<p>Hi Please change my color to red Click below button</p>

代码应该是这样的：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Changecolor extends Component{
state = { coloring: false };
changeme=()=>{
this.setState({coloring: true})
}
render(){
return(
<div className='testclass'>
<h1>Click me to change my Color</h1>
<p style={this.state.coloring && { color: 'red'}}>Hi Please change my color to red Click below button</p>
<button onClick={this.changeme}>Click Me to change Color</button>
</div>
);
}
}
export default Changecolor;