Соединительный элемент для части состояния в реакции

Question

В настоящее время я изучаю некоторые реакции, и некоторые из вас могут подумать, что я об этом по-другому, но я хочу попытаться построить что-то в чистом реагировании, без редукции, без плагинов (хорошо response-dom не считается плагином)

однако я как бы попал в ловушку, я хочу связать элемент с частью состояния, чтобы я на мыши мог получить доступ к этой части состояния с небольшими проблемами, насколько это возможно, я смотрел на refs, но, насколько мне известно, это в основном связывает ваше состояние с элементом, а не наоборот в качестве примера псевдокода. Мне нужно что-то в этих строках:

class Example extends Component { 
    constructor() { 
     super(); 
     this.mouseOverHandler = this.mouseOverHandler.bind(this); 

     this.state = { 
      items: [ 
       { 
        name: 'First state part', 
        description: 'this part is ment to be connected to div1' 
       }, 
       { 
        name: 'Second state part', 
        description: 'this part is ment to be connected to div2' 
       }, 
       { 
        name: 'Third state part', 
        description: 'this part is ment to be connected to div3' 
       } 
      ] 
     } 
    } 

    mouseOverHandler(event) { 
     console.log(event.target.refs) // <-- this is where I struggle 
     /** 
     * what I want here is 
     * 
     * if I hover #div1 I want console.log to show: 
     * { 
     *  name: 'First state part', 
     *  description: 'this part is ment to be connected to div1' 
     * } 
     * 
     * if I hover #div2 I want console.log to show: 
     * { 
     *  name: 'Second state part', 
     *  description: 'this part is ment to be connected to div2' 
     * } 
     * 
     * and if I hover #div3 I want console.log to show: 
     * { 
     *  name: 'Third state part', 
     *  description: 'this part is ment to be connected to div3' 
     * } 
     */ 
    } 

    render() { 
     return (<div onMouseOver={this.mouseOverHandler}> 
      <div id='div1' ref={this.state.items[0]} key={'0'}> 
       <div id='subDiv1-1'> 
       </div> 
       <div id='subDiv1-2'> 
       </div> 
      </div> 
      <div id='div2' ref={this.state.items[1]} key={'1'}> 
       <div id='subDiv2-1'> 
       </div> 
      </div> 
      <div className='div3' ref={this.state.items[2]} key={'2'}> 
       <div id='subDiv3-1'> 
       </div> 
      </div> 
     </div>); 
    } 
} 

любые идеи о том, как я должен это делать?

Answer 1

Вы можете получить доступ к состоянию в обработчике; это работало для меня (я уменьшил то, что я утешаю вошел, но это было только, чтобы уменьшить ввод, он по-прежнему показывает проводку вверх):

mouseOverHandler(event) { 
    if (event.currentTarget.id) { 
     switch (event.currentTarget.id) { 
     case 'div1': 
      console.log('First state part'); 
      break; 
     case 'div2': 
      console.log('Second state part'); 
      break; 
     case 'div3': 
      console.log('Third state part'); 
      break; 

     default: 
      console.log(event.currentTarget); 
     } 
    } 
    } 

    render() { 
    return (
     <div> 
     <div id="div1" className="div1" onMouseOver={this.mouseOverHandler}> 
      <div> 
      Curabitur aliquet quam id dui posuere blandit. 
      </div> 
      <div> 
      Proin eget tortor risus. 
      </div> 
     </div> 
     <div id="div2" className="div2" onMouseOver={this.mouseOverHandler}> 
      <div> 
      Nulla porttitor accumsan tincidunt 
      </div> 
     </div> 
     <div id="div3" className="div3" onMouseOver={this.mouseOverHandler}> 
      <div> 
      Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

Как вы можете видеть, более легко отслеживать, какие ДИВ получил событие I добавлен обработчик для каждого div. Кроме того, я использую event.currentTarget в обработчике.