如何使用 onClick 将状态道具发送到 React 中的另一个组件？

要使用 onClick 将状态道具发送到 React 中的另一个组件，您需要在发送和接收道具的组件中实现以下步骤：

发送组件：

1. 创建一个状态道具，它将包含要发送给接收组件的数据。

   class SendingComponent extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         dataToSend: 'Hello World!'
       };
     }
   
     render() {
       return (
         <div>
           <button onClick={() => this.props.onClick(this.state.dataToSend)}>
             Send Data to Receiving Component
           </button>
         </div>
       );
     }
   }
   

2. 在单击按钮时，将状态道具数据发送到接收组件中。

   class SendingComponent extends React.Component {
     // ...
   
     render() {
       return (
         <div>
           <button onClick={() => this.props.onClick(this.state.dataToSend)}>
             Send Data to Receiving Component
           </button>
         </div>
       );
     }
   }
   

   在上述代码中，请注意 onClick 函数的使用方式。我们使用箭头函数将数据参数传递给从父组件传递过来的 onClick 函数。

接收组件：

1. 在接收组件中，创建一个空状态来接收来自发送组件的数据。

   class ReceivingComponent extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         receivedData: ''
       };
     }
   
     render() {
       return (
         <div>
           <p>Received Data: {this.state.receivedData}</p>
         </div>
       );
     }
   }
   

2. 将一个名为 onClick 的函数传递给发送组件，该函数将通过 setState 改变接收组件中的状态道具。

   class ParentComponent extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         receivedData: ''
       };
       this.handleClick = this.handleClick.bind(this);
     }
   
     handleClick(data) {
       this.setState({
         receivedData: data
       });
     }
   
     render() {
       return (
         <div>
           <SendingComponent onClick={this.handleClick} />
           <ReceivingComponent receivedData={this.state.receivedData} />
         </div>
       );
     }
   }
   

   在上述代码中，请注意 handleClick 函数的使用方式。它将来自发送组件的数据参数设置为接收组件中的状态道具。

这样，您现在可以使用 onClick 将状态道具发送到 React 中的另一个组件。