javascript - 如何让 React preventDefault 工作 'e.preventDefault();' 不工作

Question

所以我的反应应用程序有一个问题，我想在提交表单时防止默认行为。但是，当我提交表单时， preventDefault() 似乎没有做任何事情。此外，当我将鼠标悬停在我的函数中的 e 周界和 preventDefault 方法时，vscode 没有提供任何信息，表明它似乎没有识别它？

import React, { useState } from 'react';
import './Feed.css';
import CreateIcon from '@material-ui/icons/Create';
import ImageIcon from '@material-ui/icons/Image';
import SubscriptionsIcon from '@material-ui/icons/Subscriptions';
import EventNoteIcon from '@material-ui/icons/EventNote';
import CalendarViewDayIcon from '@material-ui/icons/CalendarViewDay';
import InputOption from './InputOption';
import Post from './Post';

function Feed() {
    const [posts, setPosts] = useState([]);

    const sendPost = (e) => {
        e.preventDefault();
    };

    return (
        <div className="feed">
            <div className="feed__inputContainer">
                <div className="feed__input">
                    <CreateIcon />
                    <form>
                        <input type="text"></input>
                        <button onClick={sendPost} type="submit">Send</button>
                    </form>
                </div>
                <div className="feed__inputOptions">
                    <InputOption Icon={ImageIcon} title="Photo" color="#70B5F9" />
                    <InputOption Icon={SubscriptionsIcon} title="Video" color="#E7A33E" />
                    <InputOption Icon={EventNoteIcon} title="Event" color="#C0CBCD" />
                    <InputOption Icon={CalendarViewDayIcon} title="Write Article" color="#7FC15E" />
                </div>
            </div>
            {posts.map((post) => (
                <Post />
            ))}
            <Post name="James Osborne" description="This is a test" message="This is a message" />

        </div>
    );
}

export default Feed

标签： javascriptreactjsjsx

Answer 1

您需要在表单标签中申请提交，而不是像那样单击按钮

  <form onSubmit={sendPost} >
      <input type="text"></input>
      <button type="submit">Send</button>
  </form>