Блог

Я пытаюсь создать страницу, на которой отображаются сообщения пользователя в React, и я хочу реализовать значок, при нажатии на который будет отображаться всплывающая форма для отправки нового сообщения другому пользователю.

Я попытался реализовать состояние и изменить состояние при нажатии на значок, отображая форму и вызывая функцию showForm, хотя при нажатии на значок ничего не происходит — сообщение не регистрируется и, похоже, ничего не вызывается.

MessageList.js:

 const MESSAGING_URL = 'http://localhost:8080/messages'; const SEND_MESSAGE_URL = 'http://localhost:8080/messages/send-message'; class MessageList extends Component {   constructor(props) {  super(props);  this.state = {showForm: false, messages: [], token: '', topic: '', message: '', recipientUsername: '', username: localStorage.getItem("username")};  }  componentDidMount() {  const payload = {  "username": this.state.username,  "password": localStorage.getItem("password")  };  fetch(MESSAGING_URL, {  method: 'POST',  headers: {  "Accept": "application/json",  "Content-Type": "application/json",  "Authorization": localStorage.getItem("token")  },  body: JSON.stringify(payload)  })  .then(response =gt; response.json())  .then(data =gt; console.log(data));  }  showForm = () =gt; {  console.log("showForm fired")  return (  lt;divgt;  lt;form onSubmit={this.onSubmit}gt;  lt;labelgt;  Recipient Username:  lt;input  name="recipientUsername"  type="text"  value={this.state.recipientUsername}  onChange={this.handleInputChange} /gt;  lt;/labelgt;  lt;br /gt;  lt;labelgt;  Topic:  lt;input  name="topic"  type="text"  value={this.state.topic}  onChange={this.handleInputChange} /gt;  lt;/labelgt;  lt;br /gt;  lt;labelgt;  Message:  lt;input  name="message"  type="text"  value={this.state.message}  onChange={this.handleInputChange} /gt;  lt;/labelgt;  lt;input type="submit" value="Submit" /gt;  lt;/formgt;  lt;/divgt;  );  }   onSubmit(event) {  event.preventDefault();  const payload = {  "username": this.state.username,  "recipient-username": this.state.recipientUsername,  "topic": this.state.topic,  "message": this.state.message  };  fetch(SEND_MESSAGE_URL, {  method: 'POST',  headers: {  "Accept": "application/json",  "Content-Type": "application/json",  "Authorization": localStorage.getItem("token")  },  body: JSON.stringify(payload)  })  .then(response =gt; response.json())  .then(data =gt; this.setState({messages: data}));  }    render() {  const {messages, isLoading} = this.state;   if (isLoading) {  return lt;pgt;Loading...lt;/pgt;;  }   const messageList = messages.map(message =gt; {  return lt;tr key={message.messageId}gt;  lt;td style={{whiteSpace: 'nowrap'}}gt;{message.senderUsername}lt;/tdgt;  lt;tdgt;{message.recipientUsername}lt;/tdgt;  lt;tdgt;{message.topic}lt;/tdgt;  lt;tdgt;{message.message}lt;/tdgt;  lt;/trgt;  });   return (  lt;divgt;  lt;AppNavbar/gt;  lt;Container fluidgt;  lt;i className="fas fa-plus" onClick={() =gt; this.setState({showForm: true}) }gt;lt;/igt;  lt;button onClick={() =gt; this.setState({showForm: true}) }gt;Add New Applicationlt;/buttongt;  lt;h3gt;Messageslt;/h3gt;  lt;Table className="mt-4"gt;  lt;theadgt;  lt;trgt;  lt;th width="25%"gt;Sender Usernamelt;/thgt;  lt;th width="25%"gt;Recipient Usernamelt;/thgt;  lt;th width="25%"gt;Topiclt;/thgt;  lt;th width="25%"gt;Messagelt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  {messageList}  lt;/tbodygt;  lt;/Tablegt;  lt;/Containergt;  lt;/divgt;  );  } } export default MessageList;  

Любая помощь была бы очень признательна, спасибо.