Question

我正在使用React和jQuery。我有两个组件 - Index和Body，它们是同一个App组件的子组件。

我想使用.onClick函数渲染Index的对象。但是，该函数需要首先呈现Body。

因为我需要访问Body中的对象，所以我考虑在父Index组件的App处向对象添加.onClick函数。

这就是我做的。一切都加载，但元素永远不会获得.onClick功能。如果单击元素，控制台也不会打印任何内容。

class App extends React.Component {
    render() {
        return (
            <div>
                <Index ref="index"/>
                <Body ref="body"/>
            </div> );
    }
    componentDidMount() {
        function autoScroll (…) {
            const fp = findDOMNode(this.refs.body.refs.fullpage); // can only do this after rendering
            $(fp).fullpage.moveTo(…); // function to be called by object on Index
            console.log("clicked");
        }

        const lab = findDOMNode(this.refs.index.refs.lab)
        $(lab).onClick = function(){ this.autoScroll(…); };
    }
}

Answer 1

好吧，我可能会建议在React应用程序中远离JQuery，主要是因为当你有两件事操纵DOM时它会变得复杂。

在React中，您通常为onClick处理程序定义一个类方法，并在render方法中传递它。你走在正确的轨道上！

class App extends React.Component {

  // This will be the function we will pass down as the onClick
  autoScroll = () => {
    const fp = findDOMNode(this.refs.body.refs.fullpage);
    $(fp).fullpage.moveTo(…);
    console.log("clicked");
  }

  render() {
    return (
      <div>
        <Index handleClick={this.autoScroll} />
        <Body handleClick={this.autoScoll} />
      </div>
    );

  }
}


class Index extends React.Component {
  // You can access the click handler with the props object.
  render() {
    return (
      <div>
        <button onClick={this.props.handleClick}>I am the index component</button>
      </div>
    );

  }
}

无法将.onClick方法添加到子组件中的对象

1 个答案: