为什么我不能在react js中调用函数

Posted 2023-02-05

为什么我不能编写函数并使用react.js中的按钮调用函数？在此代码中，我要单击按钮，弹出警报并说调查已提交。我该怎么办？

function finish()
    alert('Survey Submitted! Thank you');    



function Task3()


    return(
        <div className="head">
          <h1>Experiment</h1>
          <h3>Task 3</h3>
          <p>In Task 3, you will see the right answer of your guess. </p>
          <div className="video">
          <div> <MultiStep steps=steps/> </div>

          </div>
         <button className="task3-finish" onSubmit = finish >Finish Thanks!</button>

          </div>

    )





export default Task3

答案

您是要使用onClick吗？因为应该在onSubmit元素上使用<form>。

<form onSubmit = () => finish() > 
</form>

<button onClick = () => finish() > 
</button>

另一答案

function Task3()

finish()
    alert('Survey Submitted! Thank you');    



    return(
        <div className="head">
          <h1>Experiment</h1>
          <h3>Task 3</h3>
          <p>In Task 3, you will see the right answer of your guess. </p>
          <div className="video">
          <div> <MultiStep steps=steps/> </div>

          </div>
         <button className="task3-finish" type="button" value="Submit" onClick= this.finish >Finish Thanks!</button>

          </div>);





export default Task3

我认为这会有所帮助。

另一答案

您需要将新功能作为道具传递。然后您可以调用新功能。

您的功能组件可能看起来像这样。 （我注释了一些代码，并将onsubmit更改为onclik）

Task3.js

    import React from "react";

function Task3(props) 
  return (
    <div className="head">
      <h1>Experiment</h1>
      <h3>Task 3</h3>
      <p>In Task 3, you will see the right answer of your guess. </p>
      <div className="video">
        /* <div>
          " "
          <MultiStep steps=steps />" "
        </div> */
      </div>
      <button className="task3-finish" onClick=props.callTask3Prop>
        Finish Thanks!
      </button>
    </div>
  );


export default Task3;

App.js

import React,  Component  from "react";
import Task3 from "./Task3";

class App extends Component 
  callTask3() 
    alert("Task3 call...");
  

  render() 
    return (
      <div className="App">
        <Task3 callTask3Prop=this.callTask3 />
      </div>
    );
  


export default App;

我在这里添加了一个工作示例，example