子组件按钮点击将数据发送给父组件

在React或者其他前端框架中，当子组件的按钮被点击时，通常会通过props或者事件回调的方式将数据传递给父组件。这里是一个简单的示例：

// 子组件 (ButtonComponent.js)
import React from 'react';
import PropTypes from 'prop-types';

const ButtonComponent = ({ sendData }) => {
  const handleClick = (data) => {
    sendData(data); // 调用父组件传过来的函数，并传递数据
  };

  return (
    <button onClick={() => handleClick('这是从子组件来的数据')}>
      点击我
    </button>
  );
};

ButtonComponent.propTypes = {
  sendData: PropTypes.func.isRequired, // 验证父组件是否提供了sendData函数
};

export default ButtonComponent;

// 父组件 (ParentComponent.js)
import ButtonComponent from './ButtonComponent';

class ParentComponent extends React.Component {
  sendData = (data) => {
    console.log(`接收到的数据: ${data}`); // 这里可以进一步处理数据或者将其发送到服务器等
  };

  render() {
    return (
      <div>
        <ButtonComponent sendData={this.sendData} /> {/* 将sendData方法作为prop传递给子组件 */}
      </div>
    );
  }
}

export default ParentComponent;

在这个例子中，当子组件中的按钮被点击时，它会触发`handleClick`函数，这个函数会调用父组件提供的`sendData`函数并将数据作为参数。父组件可以根据需要对数据进行操作。