Question

我运行下面的代码：我返回一个div数组，我希望它们改变鼠标输入的背景（悬停）。只有点击它才会触发事件。这是因为我需要选择div吗？我已经尝试过tab index = 0和tab index = 1！非常感谢你的帮助!!!

class OneView extends React.Component {
  constructor(props) {
    super(props);
    this.handleEnter = this.handleEnter.bind(this);
    this.handleExit = this.handleExit.bind(this);
    this.state = {
      hover: false
    }
  }
  handleEnter(e) {
    this.setState({hover: true});
  }
  handleExit(e) {
     this.setState({hover: false});
  }
  render() {
    var specificStyle = {
      textAlign: 'center',
      flex: 1,
      backgroundColor : this.state.hover ? '#111' : '#CCC',
    };
    return(
      <div style={Object.assign(genericStyle, specificStyle)} onMouseEnter={this.handleEnter} onMouseOut={this.handleExit}>
        Test
      </div>
    );
  }
}

function GenerateMatrix() {
  var firstMatrix = [];
  var specificStyle = {
    display:"inline-flex",
    flexDirection:'row',
    flex: 1
  };
  for (var i = 1; i < 8; i++) {
    firstMatrix.push(<OneView/>);
  }
  return (
    <div style={Object.assign(genericStyle, specificStyle)}>
      {firstMatrix}
    </div>
  );
}

Answer 1

摆脱genericStyle并仅使用specificStyle

＆＃13;

class OneView extends React.Component {
  constructor(props) {
    super(props);
    this.handleEnter = this.handleEnter.bind(this);
    this.handleExit = this.handleExit.bind(this);
    this.state = {
      hover: false
    }
  }
  handleEnter(e) {
    this.setState({hover: true});
  }
  handleExit(e) {
     this.setState({hover: false});
  }
  render() {
    var specificStyle = {
      textAlign: 'center',
      flex: 1,
      backgroundColor : this.state.hover ? '#111' : '#CCC',
    };
    return(
      <div style={Object.assign(specificStyle)} onMouseEnter={this.handleEnter} onMouseOut={this.handleExit}>
        Test
      </div>
    );
  }
}

function GenerateMatrix() {
  var firstMatrix = [];
  var specificStyle = {
    display:"inline-flex",
    flexDirection:'row',
    flex: 1
  };
  for (var i = 1; i < 8; i++) {
    firstMatrix.push(<OneView/>);
  }
  return (
    <div style={Object.assign(specificStyle)}>
      {firstMatrix}
    </div>
  );
}

ReactDOM.render(<GenerateMatrix/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

ReactJS：onMouseEnter仅在单击时触发

1 个答案: