Javascript 如何在单击React.js按钮时运行警报

我一直在运行react文件上载教程，并希望添加到它。我正试图做到这一点，当用户点击上传消息时，浏览器会提示他们说“您的文件正在上传”，我不是前端开发人员，所以如果这个问题是超级nooby，请原谅我。出于某种原因，当我使用此代码时，如果导航到网页，函数中的代码将运行一次，然后单击再次运行。我的预期用途是只点击运行，你知道我做错了什么吗

import React, { Component } from 'react'
import { Alert } from 'react-alert'

class Main extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      imageURL: '',
    };

    this.handleUploadImage = this.handleUploadImage.bind(this);
  }

  handleUploadImage(ev) {
    ev.preventDefault();

    const data = new FormData();
    data.append('file', this.uploadInput.files[0]);
    data.append('filename', this.fileName.value);

    fetch('http://localhost:8000/upload', {
      method: 'POST',
      body: data,
    }).then((response) => {
      response.json().then((body) => {
        this.setState({ imageURL: `http://localhost:8000/${body.file}` });
      });
    });
  }

  render() {
    return (
      <form onSubmit={this.handleUploadImage}>
        <div>
          <input ref={(ref) => { this.uploadInput = ref; }} type="file" />
        </div>
        <div>
          <input ref={(ref) => { this.fileName = ref; }} type="text" placeholder="Enter the desired name of file" />
        </div>
        <br />
        <div>
          <button onclick="myFunction()">Upload</button>
              <script>
              function myFunction() {
                  alert("Your file is being uploaded!")
              }
              </script>

        </div>
        <img src={this.state.imageURL} alt="img" />
      </form>
    );
  }
}

export default Main;

import React，{Component}来自“React”
从“反应警报”导入{Alert}
类Main扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
imageURL:“”，
};
this.handleUploadImage=this.handleUploadImage.bind（this）；
}
手绘图像（ev）{
ev.preventDefault（）；
const data=新表单数据（）；
data.append（'file'，this.uploadInput.files[0]）；
data.append（'filename'，this.filename.value）；
取（'http://localhost:8000/upload', {
方法：“POST”，
正文：数据，
})。然后（（响应）=>{
response.json（）.then（（body）=>{
此.setState（{imageURL:`http://localhost:8000/${body.file}`}）；
});
});
}
render（）{
返回(
{this.uploadInput=ref；}}type=“file”/>
{this.fileName=ref；}}type=“text”placeholder=“输入所需的文件名”/>


上传
函数myFunction（）{
警报（“正在上载您的文件！”）
}
);
}
}
导出默认主；

更改

<form onSubmit={this.handleUploadImage}>

到

this.handleUploadImage（e）}>

---

这将仅在您单击时调用handleUploadImage，为什么不在handleUploadImage函数的开头移动警报

handleUploadImage(ev) {
    alert("Your file is being uploaded!")
    ....
}

而不是

<div>
  <button onclick="myFunction()">Upload</button>
      <script>
      function myFunction() {
          alert("Your file is being uploaded!")
      }
      </script>

</div>

上传
函数myFunction（）{
警报（“正在上载您的文件！”）
}

你会有

<div>
  <button type="submit">Upload</button>
</div>

上传

对于任何好奇的人，以下是我收到帮助后的最终代码

import React, { Component } from 'react'
import { Alert } from 'react-alert'

class Main extends React.Component {


  constructor(props) {
    super(props);

    this.state = {
      imageURL: '',
    };

    this.handleUploadImage = this.handleUploadImage.bind(this);
  }

  handleUploadImage(ev) {
    alert("Your file is being uploaded!")
    ev.preventDefault();

    const data = new FormData();
    data.append('file', this.uploadInput.files[0]);
    data.append('filename', this.fileName.value);

    fetch('http://localhost:8000/upload', {
      method: 'POST',
      body: data,
    }).then((response) => {
      response.json().then((body) => {
        this.setState({ imageURL: `http://localhost:8000/${body.file}` });
      });
    });
  }

  render() {
    return (
      <form onSubmit={this.handleUploadImage}>
        <div>
          <input ref={(ref) => { this.uploadInput = ref; }} type="file" />
        </div>
        <div>
          <input ref={(ref) => { this.fileName = ref; }} type="text" placeholder="Enter the desired name of file" />
        </div>
        <br />
        <div>
          <button type="submit">Upload</button>
        </div>
        <img src={this.state.imageURL} alt="img" />
      </form>
    );
  }
}

export default Main;

import React，{Component}来自“React”
从“反应警报”导入{Alert}
类Main扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
imageURL:“”，
};
this.handleUploadImage=this.handleUploadImage.bind（this）；
}
手绘图像（ev）{
警报（“正在上载您的文件！”）
ev.preventDefault（）；
const data=新表单数据（）；
data.append（'file'，this.uploadInput.files[0]）；
data.append（'filename'，this.filename.value）；
取（'http://localhost:8000/upload', {
方法：“POST”，
正文：数据，
})。然后（（响应）=>{
response.json（）.then（（body）=>{
此.setState（{imageURL:`http://localhost:8000/${body.file}`}）；
});
});
}
render（）{
返回(
{this.uploadInput=ref；}}type=“file”/>
{this.fileName=ref；}}type=“text”placeholder=“输入所需的文件名”/>


上传
);
}
}
导出默认主；

页面加载/refreshOk时似乎仍在抛出警报尝试将handleUploadImage（ev）{更改为handleUploadImage=ev=>{尝试将

更改为

@ByrdeManuel，当我尝试时，我会收到一条新的错误消息：第48行：“myFunction”未定义没有未定义也尝试您在上面发布的方式仅将函数括在引号中不会引发错误，但会在页面加载/刷新时提醒浏览器定义

myFunction

，级别与相同e> handleUpdateImage而不是在

标记中，它应该是这样工作的。天哪，是的！这非常有意义。哇，在这上面浪费了这么多的周期……谢谢。这完全有效，因为“HandleUplateImage”在表单提交之前，代码不会运行，当按下按钮时会发生这种情况……做得好。这太棒了，谢谢你的帮助！！！

import React, { Component } from 'react'
import { Alert } from 'react-alert'

class Main extends React.Component {


  constructor(props) {
    super(props);

    this.state = {
      imageURL: '',
    };

    this.handleUploadImage = this.handleUploadImage.bind(this);
  }

  handleUploadImage(ev) {
    alert("Your file is being uploaded!")
    ev.preventDefault();

    const data = new FormData();
    data.append('file', this.uploadInput.files[0]);
    data.append('filename', this.fileName.value);

    fetch('http://localhost:8000/upload', {
      method: 'POST',
      body: data,
    }).then((response) => {
      response.json().then((body) => {
        this.setState({ imageURL: `http://localhost:8000/${body.file}` });
      });
    });
  }

  render() {
    return (
      <form onSubmit={this.handleUploadImage}>
        <div>
          <input ref={(ref) => { this.uploadInput = ref; }} type="file" />
        </div>
        <div>
          <input ref={(ref) => { this.fileName = ref; }} type="text" placeholder="Enter the desired name of file" />
        </div>
        <br />
        <div>
          <button type="submit">Upload</button>
        </div>
        <img src={this.state.imageURL} alt="img" />
      </form>
    );
  }
}

export default Main;