ReactJS：onMouseEnterは、クリックされた場合にのみ発生します。

Question

以下のコードを実行します。divの配列を返し、マウスのEnter（hover）で背景を変更します。イベントは、クリックすると発生します。私はdivを選択する必要があるので、これはですか？私はすでにタブインデックス= 0とタブインデックス= 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を使用するだけ

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'));

<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>

の作品ましょう