Reactメニュー項目をホバー

Question

私はリバースMobXの上にリストアイテムをしようとしています。ここに私のコードは

export default observer( 
class SidebarContent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    componentWillMount() { 
    this.props.store.fetchSources() 
    } 

    toggleHover(){ 
    this.props.store.hover = !this.props.store.hover; 
    } 

    getArticles(src) { 
    this.props.store.fetchArticles(src); 
    } 

render() { 
    const style1 = this.props.style ? {...styles.sidebar, ...this.props.style} : styles.sidebar; 
    const { sources, hover } = this.props.store 

    var linkStyle; 
    if (this.props.store.hover) { 
     linkStyle = {backgroundColor: 'black'} 
    } else { 
     linkStyle = {backgroundColor: 'white'} 
    } 

    const links = sources.map((src,index) => (
    <a key={index} href='javascript:;' style={styles.sidebarLink} onClick={this.getArticles.bind(this, src.id)} > 
      <span style={linkStyle} onMouseEnter={this.toggleHover.bind(this)} onMouseLeave={this.toggleHover.bind(this)}  > 
      <img className="ui-avaatar image" src='{ src.urlsToLogos.small }' /> 
      <span className="side-news-item"> {src.name} </span> 
      </span>  
    </a> 
)) 
    return (
    <MaterialTitlePanel title="Menu" style={style1}> 
     <div style={styles.content}> 
     <div style={styles.divider} /> 
     {links} 
     </div> 
    </MaterialTitlePanel> 
); 
    } 
} 
); 
const styles = { 
    sidebar: { 
    width: 256, 
    height: '100%', 
    }, 
    sidebarLink: { 
    display: 'block', 
    padding: '16px 0px', 
    color: '#757575', 
    textDecoration: 'none', 
    }, 
    divider: { 
    margin: '8px 0', 
    height: 1, 
    backgroundColor: '#757575', 
    }, 
    content: { 
    padding: '16px', 
    height: '100%', 
    backgroundColor: 'white', 
    }, 
}; 

this.props.store.hoverです。 問題は、1つのアイテム上にマウスを置くと、すべてのアイテムがホバー効果を得ることです。私は何を間違えたのですか？

Answer 1

コンポーネントのプロップを直接設定しないでください。コンポーネントの上部に設定してください。 または状態機能を使用し、常にsetState（）を使用して状態を変更することができます。

は多分

class SidebarContent extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    } 
 
    componentWillMount() { 
 
    this.props.store.fetchSources() 
 
    } 
 

 
    getArticles(src) { 
 
    this.props.store.fetchArticles(src); 
 
    } 
 

 
render() { 
 

 

 
    const links = sources.map((src,index) => <Button />); 
 
    return (
 
    <MaterialTitlePanel title="Menu" style={style1}> 
 
     <div style={styles.content}> 
 
     <div style={styles.divider} /> 
 
     {links} 
 
     </div> 
 
    </MaterialTitlePanel> 
 
); 
 
    } 
 
} 
 

 
class Button extends React.Component { 
 

 
    toggleHover(){ 
 
    this.setState({ 
 
     hover: !this.state.hover, 
 
    }); 
 
    } 
 

 

 
    render() { 
 
    const style1 = this.props.style ? {...styles.sidebar, ...this.props.style} : styles.sidebar; 
 
    const { sources } = this.props.store 
 
    const { hover } = this.state; 
 

 
    var linkStyle; 
 
    if (hover) { 
 
     linkStyle = {backgroundColor: 'black'} 
 
    } else { 
 
     linkStyle = {backgroundColor: 'white'} 
 
    } 
 
    
 
    return (
 
     <a key={index} href='javascript:;' style={styles.sidebarLink} onClick={this.getArticles.bind(this, src.id)} > 
 
      <span style={linkStyle} onMouseEnter={this.toggleHover.bind(this)} onMouseLeave={this.toggleHover.bind(this)}  > 
 
      <img className="ui-avaatar image" src='{ src.urlsToLogos.small }' /> 
 
      <span className="side-news-item"> {src.name} </span> 
 
      </span>  
 
    </a> 
 
    ); 
 
    } 
 

 
} 
 

 

 
const styles = { 
 
    sidebar: { 
 
    width: 256, 
 
    height: '100%', 
 
    }, 
 
    sidebarLink: { 
 
    display: 'block', 
 
    padding: '16px 0px', 
 
    color: '#757575', 
 
    textDecoration: 'none', 
 
    }, 
 
    divider: { 
 
    margin: '8px 0', 
 
    height: 1, 
 
    backgroundColor: '#757575', 
 
    }, 
 
    content: { 
 
    padding: '16px', 
 
    height: '100%', 
 
    backgroundColor: 'white', 
 
    }, 
 
};

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

を助けるボタンの状態を下記の

コードを制御するサブコンポーネントを書きます