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

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

javascript jquery reactjs

Javascript 无法将.onClick方法添加到子组件中的对象,javascript,jquery,reactjs,Javascript,Jquery,Reactjs,我正在使用React和jQuery。我有两个组件，索引和正文，它们是同一应用程序组件的子组件我想用一个.onClick函数呈现一个索引的对象。但是，该函数需要首先呈现Body 因为我需要访问Body中的对象，所以我考虑将.onClick函数添加到父App组件右侧的Index中的对象我就是这样做的。所有内容都会加载，但元素从未获得.onClick功能。如果单击元素，控制台也不会打印任何内容 class App extends React.Component { render() {

我正在使用React和jQuery。我有两个组件，

索引

和

正文

，它们是同一

应用程序

组件的子组件

我想用一个.onClick函数呈现一个

索引的对象。但是，该函数需要首先呈现Body

因为我需要访问Body
中的对象，所以我考虑将.onClick函数添加到父App
组件右侧的Index
中的对象
我就是这样做的。所有内容都会加载，但元素从未获得.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(…); };
    }
}

类应用程序扩展了React.Component{
render（）{
返回(
);
}
componentDidMount（）{
函数autoScroll（…）{
const fp=findDOMNode（this.refs.body.refs.fullpage）；//只能在呈现后执行此操作
$（fp）.fullpage.moveTo（…）；//要由索引上的对象调用的函数
控制台日志（“单击”）；
}
const lab=findDOMNode（this.refs.index.refs.lab）
$（lab.onClick=function（）{this.autoScroll（…）；}；
}
}
好吧，我首先建议不要在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>
    );

  }
}

类应用程序扩展了React.Component{
//这将是我们将作为onClick传递的函数
自动滚动=（）=>{
const fp=findDOMNode（this.refs.body.refs.fullpage）；
$（fp.fullpage.moveTo（…）；
控制台日志（“单击”）；
}
render（）{
返回(
);
}
}
类索引扩展了React.Component{
//可以使用props对象访问单击处理程序。
render（）{
返回(
我是索引组件
);
}
}
好吧，我首先建议不要在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>
    );

  }
}

类应用程序扩展了React.Component{
//这将是我们将作为onClick传递的函数
自动滚动=（）=>{
const fp=findDOMNode（this.refs.body.refs.fullpage）；
$（fp.fullpage.moveTo（…）；
控制台日志（“单击”）；
}
render（）{
返回(
);
}
}
类索引扩展了React.Component{
//可以使用props对象访问单击处理程序。
render（）{
返回(
我是索引组件
);
}
}
onclick
无论如何，在组件首次装载后都将调用处理程序。我认为您可以在componentDidMount（）
之外定义autoScroll函数。我可以为fp
对象的autoScroll添加额外的参数fp=findDOMNode…
很遗憾，只能在呈现后在componentDidMount
中调用。但无论如何，这仍然不起作用。不要使用jquery在react中设置onclick处理程序。相反，通过道具将函数传递给索引，并在索引内部将其传递给需要它的对象。onclick
handler将在组件首次装入后调用。我认为您可以在componentDidMount（）
之外定义autoScroll函数。我可以为fp
对象的autoScroll添加额外的参数fp=findDOMNode…
很遗憾，只能在呈现后在componentDidMount
中调用。但无论如何，这仍然不起作用。不要使用jquery在react中设置onclick处理程序。相反，通过道具将一个函数传递给索引，内部索引将其传递给需要它的对象。非常感谢，它成功了！我将它改为onClick={（）=>this.props.handleClick}
，这样在渲染过程中就不会触发handleClick
。不幸的是，我必须使用jQuery并对同一个项目做出反应。非常感谢，它很有效！我将其更改为onClick={（）=>this.props.handleClick}
，这样在渲染过程中就不会触发handleClick
。不幸的是，我必须使用jQuery并对同一个项目做出反应。