通過在reactjs中傳遞此值的Onclick事件處理程序

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中這樣的單擊處理程序。 我怎樣才能做到這一點？

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'));

這是小提琴 。

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將自動調用它。