Question

我的组件如下：

import React, {PropTypes} from 'react';
export default class Viewdesc extends React.Component {
render() {
return (
    <div className="col-md-12 slide-row">
        <div className="col-md-12 overview-about-property">
            <div className="expandabletext less">
                <div className="col-md-12" dangerouslySetInnerHTML={{__html: this.props.record.ABOUT}}></div>
            </div>
            <div className="showmore"> Show More </div>
        </div>
    </div>
);
}
}

我想调用函数说showmorefunct（）在jquery中传递这样的clicked handler。我怎么能这样做？

Answer 1

如果您愿意，您可以绑定您的功能并传递您想要的参数。你可以这样做：

class Test extends React.Component {
    handleClick(param, e){
        console.log(e);
        console.log(param);
    }

    render(){
        return (
        <div className="showmore" onClick={this.handleClick.bind(this, "Some param if you need it")}> Show More </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

这是fiddle。

Answer 2

<强>更新 http://jsfiddle.net/jwm6k66c/1517/

我不太了解你的问题，但我想你想要这个 -

import React, {PropTypes} from 'react';
export default class Viewdesc extends React.Component {
  constructor(props) {
    super(props)
    this.showMoreFunct = this.showMoreFunct.bind(this)
  }
  showMoreFunct() {
    alert('Show more clicked!')
  }
  render() {
    return (
      <div className="col-md-12 slide-row">
        <div className="col-md-12 overview-about-property">
            <div className="expandabletext less">
              <div className="col-md-12" dangerouslySetInnerHTML={{__html: this.props.record.ABOUT}}></div>
              </div>
            <div className="showmore"> <span onClick={this.showMoreFunct}>Show More</span> </div>
        </div>
      </div>
    );
  }
}

您可以将span替换为a或button。您只需要指定要调用onClick prop的函数。当用户点击span时，React会自动调用它。

Onclick事件处理程序在reactjs中传递它

2 个答案: