javascript — странное поведение в реакции при отправке формы, которую он отправляет и удаляет одновременно

странное поведение в реакции при отправке формы она отправляет и удаляет одновременно

У меня есть форма, которая представляет некоторые данные, и у меня есть компонент элемента, который имеет кнопку удаления, которая удаляет элемент, но когда я отправляю что-то, он отправляет и удаляет элемент одновременно

 import React, {Component} from 'react'; import ApiClient from './apiClient'; import './MessageForm.css'; class MessageForm extends Component { constructor(props){ super(props); this.state = { submitted: false } } handleSubmit = async (event) ={amp}gt; { event.preventDefault(); const messageData = new FormData(event.target); await ApiClient.addMessage({ license_plate: messageData.get('license'), body: messageData.get('body') }); // console.log("submitted"); // this.props.refreshList(); }; render() { return( {amp}lt;form onSubmit={this.handleSubmit} className="MessageForm"{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label htmlFor="license"{amp}gt;License Plate{amp}lt;/label{amp}gt; {amp}lt;input id="license" name="license" type="text" /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label htmlFor="body"{amp}gt;Message{amp}lt;/label{amp}gt; {amp}lt;textarea id="body" name="body" type="text"/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="submit" value="Submit"/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/form{amp}gt; ) } }; export default MessageForm; 

это компонент элемента

 import React from 'react'; import moment from 'moment'; import SocailShare from './SocialShare.css' import { FacebookShareButton, LinkedinShareButton, TwitterShareButton, TelegramShareButton, WhatsappShareButton, EmailShareButton,} from 'react-share'; import { FacebookIcon, EmailIcon, TwitterIcon, TelegramIcon, WhatsappIcon, LinkedinIcon,} from 'react-share'; import { FacebookShareCount, PinterestShareCount, VKShareCount, OKShareCount, RedditShareCount, TumblrShareCount, } from 'react-share'; import './MessageItem.css'; export default ({ id, submission_date, license_plate, body, handleDelete }) ={amp}gt; { var timePosted = moment(submission_date).format('DD/MM/YYYY - HH:mm'); const onDelete = (id) ={amp}gt; { handleDelete(id); } return ( {amp}lt;li className="MessageItem"{amp}gt; {amp}lt;span{amp}gt;Time: {timePosted} - {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;To license: {license_plate} : {amp}lt;/span{amp}gt; {amp}lt;span{amp}gt; {body} {amp}lt;/span{amp}gt; {amp}lt;button onClick={onDelete(id)}{amp}gt;X{amp}lt;/button{amp}gt; {amp}lt;div className="SocialShare"{amp}gt; {amp}lt;FacebookShareButton url="https://github.com/nygardk/react-share#readme" {amp}gt; {amp}lt;FacebookIcon size={30}/{amp}gt; {amp}lt;FacebookShareCount url="https://github.com/nygardk/react-share#readme"{amp}gt; {shareCount ={amp}gt; ( {amp}lt;span className="myShareCountWrapper"{amp}gt;{shareCount}{amp}lt;/span{amp}gt; )} {amp}lt;/FacebookShareCount{amp}gt; {amp}lt;/FacebookShareButton{amp}gt; {amp}lt;TwitterShareButton url="https://github.com/nygardk/react-share#readme"{amp}gt; {amp}lt;TwitterIcon size={30}/{amp}gt; {amp}lt;/TwitterShareButton {amp}gt; {amp}lt;EmailShareButton url="https://github.com/nygardk/react-share#readme"{amp}gt; {amp}lt;EmailIcon size={30}/{amp}gt; {amp}lt;/EmailShareButton{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/li{amp}gt; ); }; 

и это компонент списка сообщений, который отображает элемент сообщения

 import React, { Component } from 'react'; import './MessageList.css'; import MessageItem from './MessageItem'; import ApiClient from './apiClient' class MessageList extends Component { constructor(props) { super(props); } handleOnDelete = async (id) ={amp}gt; { console.log(id   "deleted") await ApiClient.deleteMessage(id); this.props.refreshList(); } render() { const { messages } = this.props; messages.sort(function(a,b){ //the list will be ordered in descending date order (most recent first) return new Date(b.submission_date) - new Date(a.submission_date); }); const $messages = messages.map((message) ={amp}gt; {amp}lt;MessageItem handleDelete={this.handleOnDelete} key={message._id} {...message} /{amp}gt;); return ( {amp}lt;section className="MessageList"{amp}gt; {amp}lt;h1{amp}gt;Message Board{amp}lt;/h1{amp}gt; {amp}lt;ul{amp}gt; {$messages} {amp}lt;/ul{amp}gt; {amp}lt;/section{amp}gt; ) } } export default MessageList; 

и это компонент приложения, где все отображается

 import React, { Component} from 'react'; import {BrowserRouter, Route, Switch} from 'react-router-dom'; import ApiClient from './apiClient'; import './App.css'; import MessageForm from './MessageForm'; import MessageList from './MessageList'; class App extends Component { constructor(props){ super(props); this.state = { messages: [] } } componentDidMount = async () ={amp}gt; { this.refreshList(); } refreshList = async () ={amp}gt; { const messages = await ApiClient.getMessages(); this.setState({ messages }) } render () { return ( {amp}lt;BrowserRouter{amp}gt; {amp}lt;div className="App"{amp}gt; {amp}lt;header className="App-header"{amp}gt; {amp}lt;h1{amp}gt;Hello License{amp}lt;/h1{amp}gt; {amp}lt;p{amp}gt;Send your messages to a plate number easily!{amp}lt;/p{amp}gt; {amp}lt;/header{amp}gt; {amp}lt;MessageForm refreshList = {this.refreshList}/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path="/api" render ={props ={amp}gt; {amp}lt;MessageList refreshList = {this.refreshList} messages={this.state.messages} {...props}/{amp}gt; }/{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/BrowserRouter{amp}gt; ) } }; export default App; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector