Question

我在<button>内部有一个<BtnComponent />元素（位于另一个组件中），我试图像这样处理点击：

BtnContainer.js父组件：

import React from 'react';
import Btn from './Btn';


var BtnContainer = React.createClass({

  handleClick() {
    alert('hello');
  },
  render() {
    return (
      <div id="container">
        <Btn onClick={this.handleClick} />
      </div>
    )
  }
});

module.exports = BtnContainer;

这是Btn.js组件。

import React from 'react';

const Btn = () => (
  <button className="btn">Click</button>
);

export default Btn;

我尝试将onClick放在实际的按钮元素中但是出错了。

思想？

Answer 1

试试这个：

<强> BtnContainer.js

import React from 'react';
import Btn from './Btn';


var BtnContainer = React.createClass({

  handleClick() {
    alert('hello');
  },
  render() {
    return (
      <div id="container">
        <Btn onClick={this.handleClick} />
      </div>
    )
  }
});

module.exports = BtnContainer;

<强> Btn.js

import React from 'react';

const Btn = ({ onClick }) => (
  <button onClick={onClick} className="btn">Click</button>
);

export default Btn;

React - onClick在组件实例中？

1 个答案: