将元素连接到反应中的部分状态

Question

我目前正在学习一些反应，你们中的一些人可能认为我这样做是错误的，但我想尝试在纯反应中构建一些东西，没有 redux，没有插件（很好反应-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>
    );
  }
}

如您所见，为了更轻松地跟踪哪个 div 收到了事件，我为每个 div 添加了一个处理程序。另外，我在处理程序中使用 event.currentTarget。

将元素连接到反应中的部分状态

Connecting element to part of state in react

state

reactjs