Question

任何人都可以帮助 javascript 初学者，我正在从 API 获取消息，并且可以在输入字段中发送消息。

我希望在单击按钮并发送消息时清除输入字段，现在单击发送时消息仍然存在。我怎样才能做到这一点？

https://love-happy-thoughts.netlify.app/ （如果您尝试发送，您需要在邮件中超过 5 个字母才能发送）

https://github.com/AsaHildebrand/project-happy-thoughts/tree/master/code/src

import React from 'react';
const NewThoughts =({ newMessage, onNewMessageChange, onFormSubmit }) => {
  return (
    <label>
      <form
        className='message-section'
        onSubmit={onFormSubmit}>
        <label
          htmlFor='messages'>
          <h2>What's making you happy right now?</h2>
        </label>
        <input
          className='message-area'
          id='messages'
          type='text'
          value={newMessage}
          onChange={onNewMessageChange}
        />
        <button
          className='submit-button'
          type='submit'>
          <span className='heart-icons' role="img" aria-label="heart-icon">❤️</span> 
            Send Happy Thought! 
          <span className='heart-icons' role="img" aria-label="heart-icon">❤️</span>
        </button>
      </form>
    </label>
  );
}

export default NewThoughts;

App.js：

    import React, { useState, useEffect } from 'react';
    
    import ThoughtsList from './components/ThoughtsList';
    import NewThoughts from './components/NewThoughts';
    
    import { API_URL, LIKES_URL } from './reusable/urls';
    
    export const App = () => {
      const [thoughtsList, setThoughtsList] = useState([]);
      const [newMessage, setNewMessage] = useState('');
    
      useEffect(() => {
        fetchThoughtsList();
      }, [thoughtsList]);
    
      const fetchThoughtsList = () => {
        fetch(API_URL)
          .then(res => res.json())
          .then(messages => setThoughtsList(messages))
      }
    
      const onNewMessageChange = (event) => {
        setNewMessage(event.target.value);
    }
    
      const onFormSubmit = (event) => {
        event.preventDefault();
    
        const options = {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ message: newMessage })
        };
        
      fetch(API_URL, options)
        .then(res => res.json())
        .then(receivedMessage => setThoughtsList([receivedMessage, ...thoughtsList]));
      }
    
      const onHeartLikes = (id) => {
        const options = {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          }
        };
    
        fetch(LIKES_URL(id), options)
        .then(res => res.json())
        .then(receivedMessage => {
          const updatedThoughtsList = thoughtsList.map(message => {
            if (message._id === receivedMessage._id) {
              message.likes += 1;
            }
            return message;
          });
            setThoughtsList(updatedThoughtsList);
          })
      }
    
      return (
        <div>
          <NewThoughts
            newMessage={newMessage}
            onNewMessageChange={onNewMessageChange}
            onFormSubmit={onFormSubmit}
          />
          <ThoughtsList
            thoughtsList={thoughtsList}
            onHeartLikes={onHeartLikes}
          />
    
        </div>
      )
    }

Answer 1

提交表单后，您可以将NewMessage 设置为空字符串。像这样setNewMessage("")

Answer 2

 const onFormSubmit = (event) => {
        event.preventDefault();
       ... // your other codes
      setNewMessage('')
 }

发送消息时如何清除输入字段？

2 个答案: