Question

class Article extends React.Component{  
    constructor(props) {
        super(props)
        this.state = {showIncreaced: false}
    }

    increase = () => {
        this.setState({showIncreaced: !this.state.showIncreaced})
    }

    render(){   
        const TipStyle={                        
                marginBottom: '10px'
    }

    const ImgStyle={
        width: '20vw',
        marginRight: '0.5vw',
        marginLeft: '0.5vw',
        transform: this.state.showIncreaced ? 'scale(1.5, 1.5)' : 'scale(1, 1)'
}

    return(                     
        <div style={TipStyle}>                      
          <h2 style={{marginBottom: '1px'}}>{this.props.name}</h2>
          <div>
              <img style={ImgStyle} src={this.props.img1} onMouseOver={this.increase} onMouseOut={this.increase}/>
              <img style={ImgStyle} src={this.props.img2} onMouseOver={this.increase} onMouseOut={this.increase}/>
              <img style={ImgStyle} src={this.props.img3} onMouseOver={this.increase} onMouseOut={this.increase}/>                              
          </div>
        </div>                  
  ); 
 }
}

将鼠标悬停在图片上（例如img1）时，仅应增加img1。但是所有style = {ImgStyle}的img都会增加。怎么了？

https://jsfiddle.net/Nata_Hamster/k1j5se0u/1/

Answer 1

如果要在悬停时仅使其中之一增大大小，则需要使用ID。我对您的示例进行了一些更改，使用id而不是boolean以及其他改进的网络：

class Article extends React.Component{  
    constructor(props) {
        super(props)
        this.state = {showIncreaced: null}

    this.getImgStyle = this.getImgStyle.bind(this);
    this.increase = this.increase.bind(this);
    }

    increase (incId) {
        this.setState({showIncreaced: incId})
    }

  getImgStyle (id) {
    return {
      width: '20vw',
      marginRight: '0.5vw',
      marginLeft: '0.5vw',
      transform: this.state.showIncreaced === id ? 'scale(1.5, 1.5)' : 'scale(1, 1)'
    };
  }

    render(){   
        const TipStyle={                        
                marginBottom: '10px'
        }

    return(                     
        <div style={TipStyle}>                      
          <h2 style={{marginBottom: '1px'}}>{this.props.name}</h2>
          <div>
        {[1,2,3].map((id) => {
            return <img style={this.getImgStyle(id)} src={this.props[`img${id}`]} onMouseOver={this.increase.bind(this, id)} onMouseOut={this.increase} />
        })}                         
          </div>
        </div>                  
); 
}
}

https://jsfiddle.net/k1j5se0u/36/

Answer 2

您要切换每个图像的增加的状态变量，然后将其应用于样式中的所有图像。您需要一种在图像上的悬停事件之间进行区分的方法，以便可以正确应用样式。

因此，您应该具有默认的图像样式，然后是具有已修改属性的另一种图像样式，并且仅将其应用于单个图像。

React，所有包含样式的块都会触发状态，但是只需要一个状态

2 个答案: