如何在reactjs中使用鼠标悬停更改文本的状态？

我试图通过在图像上单击鼠标来更改文本的状态，但该功能不起作用

我已经在tye函数中设置了heading和parah的状态，但它不起作用

导出默认类公文包扩展组件{

constructor(props){
    super(props);
    this.state={

        heading:"helo world",
        parah:""

    }

    this.handleDiscription = this.handleDiscription.bind(this);
}

handleDiscription=()=>{
    this.setState={
        heading:"Reading Friends",
        parah:"what do you mean"
    }
}


render() {

    return (
        <div>
            <div>

                    <div  className="row ">
                    <div className="row ">
                        <div  className="reading-friends" style={{textAlign:'center'}}>
                            <h1 className="heading" style={{fontSize:'50px',fontWeight:'bold',marginTop:'140px',marginBottom:'200px',fontFamily:"catamaran,sans-serif"}} OnClick={this.handleDiscription}>{this.state.heading}</h1>
                            <p className="parah">{this.state.parah}</p>
                        </div>
                    </div>
                    </div>
                    <div  className="row d-flex justify-content-center">
                        <div style={{textAlign:'center'}} className="opti-care">
                        <h1  style={{fontSize:'50px',fontWeight:'bold',marginBottom:'200px',fontFamily:"catamaran,sans-serif"}}>Opticare Solution</h1>
                        <p>OptiCare Solution is a complete mini ERP for opticians and optometrists.<br/>
                             We are the first to bring such an extensive solution in the field of Optometry,<br></br>
                              providing features that are robust and easy to use.</p>
                        </div>
                    </div>
                    <div className="row"></div>
                </div>
                <div style={{marginTop:'270px'}} className="row ">

                <div className="col-lg-3 col-sm-3 col-3 d-flex justify-content-center">
             <Reading
             show={this.handleDiscription}

             />

构造函数（道具）{
超级（道具）；
这个州={
标题：“直升机世界”，
帕拉：““
}
this.handledescription=this.handledescription.bind（this）；
}
HandleDescription=（）=>{
这是我的国家={
标题：“阅读朋友”，
帕拉：“你是什么意思？”
}
}
render（）{
返回(
{this.state.heading}
{this.state.parah}
光学护理液
OptiCare Solution是一款针对眼镜商和验光师的完整迷你ERP。

我们是第一家在验光领域推出如此广泛解决方案的公司，


提供强大且易于使用的功能

//子组件

---

第一个问题是如何使用。您当前正在尝试重新分配

setState（）

的值，而不是将要设置的新状态的参数传递给它：

handleDiscription = () => {
    this.setState({
        heading:"Reading Friends",
        parah:"what do you mean"
    });
}

下一个问题是您试图绑定到

OnClick

，而不是

OnClick

或

onHover

。它至少应该是

OnClick

，并带有小写的“o”：

话虽如此，您在标题中提到了“悬停”，但您的目标是点击事件，您的意思是：

onMouseEnter={this.handleDiscription}

---

希望这会有所帮助！

您错误地使用了setState，它是一个带有参数的函数。当前您正在重新分配setState函数的值，而不是向它传递某些内容来更新状态。请先查看文档，您可以编辑代码吗？我将非常感谢您。您想移动

吗说明

方法设置为

onMouseOver

，然后使用

onMouseOut

重置状态。在img元素本身或它的div容器上。除了遵循第一个答案中的建议之外。检查此方法如何将此方法传递给子组件高兴地听到它的帮助。这将是一个不同的任务ion，但基本上有三个步骤：1）更新HandleDescription以获取有效负载/状态的参数（如果需要）2）将函数作为道具传递给子级

3）在子级中，从props

this.props.HandleDescription（somePayload）调用函数

我们可以通过设置状态来更改图像的状态吗？如果您的意思是更改via state和setState的src属性值，那么您可以更改。@MuhammadZain使用您迄今为止已更新的代码更新您的问题，包括子组件、悬停/鼠标悬停处理程序的更新以及迄今为止尝试的内容。

onMouseEnter={this.handleDiscription}