Question

我目前正在学习一些反应，你们中的一些人可能会认为我采用了错误的方式，但是我想尝试用纯粹的反应来构建一些东西，没有还原剂，没有插件（反应良好，并没有＃39） ; t计为插件）

然而，我有点碰到障碍，我想把一个元素连接到状态的一部分，这样我鼠标悬停就可以尽可能少地访问该部分状态，我＆＃39 ;我一直在研究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 。

将元件连接到部分状态进行反应

1 个答案: