[英]How to run an alert on button click React.js
我一直在運行一個反應文件上傳教程,並希望添加它。 我試圖這樣做,當用戶點擊上傳消息時,瀏覽器會提示他們說“你的文件正在上傳”我不是任何方式的前端開發者所以請原諒我,如果這個問題超級高興。 出於某種原因,當我使用此代碼時,如果您導航到網頁,該函數中的代碼將運行一次,然后再次單擊。 我的用途是只運行點擊,任何想法我做錯了什么?
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;
為什么不在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>
你將會有
<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;
更改
<form onSubmit={this.handleUploadImage}>
至
<form onSubmit={e => this.handleUploadImage(e)}>
這將僅在您單擊時調用handleUploadImage
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.