javascript - 在 React 中将函数 props 的事件处理程序放在哪里

Question

我正在研究react，并且编写了一个简单的组件，名为Confirm，来实现确认框

import * as React from "react";
import "./Confirm.css";

interface IProps {
    title: string;
    content: string;
    okCaption?: string;
    cancelCaption?: string;
    onOkClick: () => void;
    onCancelClick: () => void;
}

class Confirm extends React.Component<IProps> {
    public static defaultProps = {
        cancelCaption: "Cancel",
        okCaption: "OK"
        };

    private handleOnOkClick = () => {
//        console.log("OK clicked");
        this.props.onOkClick();
    }

    private handleOnCancelClick = () => {
//        console.log("Cancel clicked")
        this.props.onCancelClick();
    }

    public render() {
        return (
            <div className="confirm-wrapper confirm-visible">
                <div className="confirm-container">
                    <div className="confirm-title-container">
        <span>{this.props.title}</span>
                    </div>
                    <div className="confirm-content-container">
                        <p>{this.props.content}</p>
                    </div>
                    <div className="confirm-buttons-container">
                        <button className="confirm-cancel"
                         onClick={this.handleOnCancelClick}>{this.props.cancelCaption}</button>
                        <button className="confirm-ok"
                         onClick={this.handleOnOkClick}>{this.props.okCaption}</button>
                    </div>
                </div>
            </div>
        );
    }
}
export default Confirm;

在我的 App.tsx 中，我有:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Confirm from './Confirm';


private handleCancelConfirmClick = () => {
  console.log("Cancel clicked");
};

private handleOkConfirmClick = () => {
console.log("Ok clicked");


const App = () => {

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <Confirm
        title="React and Javascript"
        content="Are you sure you want to learn them?"
        cancelCaption="No way!"
        okCaption="Yes, why not?"
        onOkClick={this.handleOkConfirmClick}
        onCancelClick={this.handleCancelConfirmClick}
      />
    </div>
  );
}


export default App;

无论我将两个私有(private)函数handleOkConfirmClick 和handleCancelConfirmClick 放在哪里，我都会收到以下错误:

The containing arrow function captures the global value of 'this'.  TS7041

    27 |         cancelCaption="No way!"
    28 |         okCaption="Yes, why not?"
  > 29 |         onOkClick={this.handleOkConfirmClick}
       |                    ^
    30 |         onCancelClick={this.handleCancelConfirmClick}
    31 |       />
    32 |     </div>

这两个私有(private)函数应该放在哪里？我做错了什么？

谢谢

弗朗西斯科

Answer 1

this 只能在类组件中访问。您正在此处创建一个功能组件。您只需要调用该函数即可。这是示例代码:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Confirm from './Confirm';

const App = () => {
  const handleCancelConfirmClick = () => {
    console.log("Cancel clicked");
  };

  const handleOkConfirmClick = () => {
    console.log("Ok clicked");
  } 

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <Confirm
        title="React and Javascript"
        content="Are you sure you want to learn them?"
        cancelCaption="No way!"
        okCaption="Yes, why not?"
        onOkClick={handleOkConfirmClick}
        onCancelClick={handleCancelConfirmClick}
      />
    </div>
  );
}

export default App;

希望这对您有用。