onclick 功能在 React 功能组件中不起作用

Question

我尝试将名为Test 的onclick 函数添加到“点击我”按钮，一旦我点击它就会提示一条消息。到目前为止，我几乎没有成功，即当我点击按钮时什么也没发生。这是我在 App.js 中的代码：

import logo from './logo.svg';
import './App.css';
import React, {useState, useEffect, useCallback} from 'react';

const canvas_style = { 
    border:"1px solid #000000",
    position: "absolute",
    top: 0, 
    left: 0,
  }

function Coordinate(props) { 

  const [HorizontalLines, setHorizontalLines] = useState({"start": [], "end": []}); //store start/end points of original horizontal lines
  const [VerticalLines, setVerticalLines] = useState({"start": [], "end": []}); // store start/end points of original vertical lines 
  const [TransformedHorizontalLines, setTransformedHorizontalLines] = useState({"start": [], "end": []}); //store start/end points of original horizontal lines
  const [TransformedVerticalLines, setTransformedVerticalLines] = useState({"start": [], "end": []}); // store start/end points of original vertical lines 
  const [TransformedUnitVectors, setUnitVectors] = useState([[1,0], [0,1]])

  useEffect(() => { //create coordinate plane on coordinate canvas once rendered
    var grid_size = 40;
    var x_axis_distance_grid_lines = 10;
    var y_axis_distance_grid_lines = 10;

    var canvas = document.getElementById("coordinates");
    var ctx = canvas.getContext("2d");

    // canvas width
    var canvas_width = canvas.width;

    // canvas height
    var canvas_height = canvas.height;

    // no of vertical grid lines
    var num_lines_x = Math.floor(canvas_height/grid_size);

    // no of horizontal grid lines
    var num_lines_y = Math.floor(canvas_width/grid_size);

    for(var i=0; i<=num_lines_x; i++) {
      ctx.beginPath();
      ctx.lineWidth = 2;
      
      // If line represents X-axis draw in different color
      if(i == x_axis_distance_grid_lines) 
          ctx.strokeStyle = "#000000";
      else
          ctx.strokeStyle = "#e9e9e9";
      
      if(i == num_lines_x) {
          ctx.moveTo(0, grid_size*i);
          ctx.lineTo(canvas_width, grid_size*i);
          var new_start_point = [0, grid_size*i];
          var new_end_point = [canvas_width, grid_size*i]; 
          var new_start = HorizontalLines["start"] 
          var new_end = HorizontalLines["end"] 
          new_start.push(new_start_point) 
          new_end.push(new_end_point) 
          setHorizontalLines({"start": new_start, "end": new_end})  
      }
      else {
          ctx.moveTo(0, grid_size*i);
          ctx.lineTo(canvas_width, grid_size*i);
          new_start_point = [0, grid_size*i];
          new_end_point = [canvas_width, grid_size]; 
          new_start = HorizontalLines["start"] 
          new_end = HorizontalLines["end"] 
          new_start.push(new_start_point) 
          new_end.push(new_end_point) 
          setHorizontalLines({"start": new_start, "end": new_end})  
      }
      ctx.stroke();
  }
  // Draw grid lines along Y-axis
for(i=0; i<=num_lines_y; i++) {
  ctx.beginPath();
  ctx.lineWidth = 1;
  
  // If line represents Y-axis draw in different color
  if(i == y_axis_distance_grid_lines) 
      ctx.strokeStyle = "#000000";
  else
      ctx.strokeStyle = "#e9e9e9";
  
  if(i == num_lines_y) {
      ctx.moveTo(grid_size*i, 0);
      ctx.lineTo(grid_size*i, canvas_height);
      new_start_point = [grid_size*i, 0];
      new_end_point = [grid_size*i, canvas_height]; 
      new_start = VerticalLines["start"] 
      new_end = VerticalLines["end"] 
      new_start.push(new_start_point) 
      new_end.push(new_end_point) 
      setVerticalLines({"start": new_start, "end": new_end})  
  }
  else {
      ctx.moveTo(grid_size*i, 0);
      ctx.lineTo(grid_size*i, canvas_height);
      new_start_point = [grid_size*i, 0];
      new_end_point = [grid_size*i, canvas_height]; 
      new_start = VerticalLines["start"] 
      new_end = VerticalLines["end"] 
      new_start.push(new_start_point) 
      new_end.push(new_end_point) 
      setVerticalLines({"start": new_start, "end": new_end})  
  }
  ctx.stroke();
}
  console.log(HorizontalLines['start'])
  console.log(HorizontalLines['end'])
  console.log(VerticalLines['start'])
  console.log(VerticalLines['end'])
  }, []);

  const Test = useCallback(() => { 
    alert("test"); //this function DOES NOT work.
  })

  return ( 
    <div style = {{position: "relative"}}> 
    <canvas id="coordinates" width="800" height="800" style={canvas_style}> </canvas>
    <canvas id="transformedCoordinates" width="800" height="800" style ={canvas_style}> </canvas>
    <button onClick={Test}>Click Me </button> 
    </div>
  )
}
function App() {
  return (
    <div> <Coordinate /> </div>
  );
}

在index.js里面，我调用了App组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Design from './test'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

如果有人可以向我建议解决此问题的方法，我将不胜感激。谢谢！

Answer 1

试试

const Test = useCallback(() => { 
    alert("test"); //this function should work now.
  }, []);

参考：https://dmitripavlutin.com/dont-overuse-react-usecallback/

Answer 2

按钮在画布后面。所以点击功能不起作用。

请更改 canvas_style。添加z-index css；

const canvas_style = { 
    border:"1px solid #000000",
    position: "absolute",
    top: 0, 
    left: 0,
    zIndex: -1,
}

Answer 3

也许这会有所帮助：<button onClick={this.Test}> Click Me </button>