javascript - react :将event.preventDefault()方法添加到功能组件中

当前，我正在尝试通过向功能组件（在bookList.js中定义的preventDefault()）的onClick处理程序中添加BookList调用来避免刷新页面。我知道我可以做到从类组件到功能。但是，有什么方法可以在preventDefault()的onClick事件处理程序中调用BookList吗？

这是我的示例代码：

BookListElement.js

import React from 'react';
import { connect } from 'react-redux';
import BookList from '../components/bookList';
import { deleteBook } from '../store/actions/projectActions';

const BookListElement = ({books, deleteBook}) => {
  if(!books.length) {
    return (
      <div>
        No Books
      </div>
    )
  }
  return (
    <div>
      {Array.isArray(books) ? books.map(book => {
        return (
          <BookList book={book} deleteBook={deleteBook} key={book._id} />
        );
      }): <h1>something wrong.</h1>}
    </div>
  );
};

const mapStateToProps = state => {
  return {
    books: state.books
  };
};

const mapDispatchToProps = dispatch => {
  return {
    deleteBook: _id => {
      dispatch(deleteBook(_id));
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(BookListElement);

bookList.js

import React, { Component } from 'react';

const styles = {
  borderBottom: '2px solid #eee',
  background: '#fafafa',
  margin: '.75rem auto',
  padding: '.6rem 1rem',
  maxWidth: '500px',
  borderRadius: '7px'
};

const BookList = ({ book: { author, publication, publisher, _id }, deleteBook }) => {
  return (
        <form>
          <div className="collection-item" style={styles} key={_id}>
            <h2>{author}</h2>
            <p>{publication}</p>
            <p>{publisher}</p>
            <button className="btn waves-effect waves-light" onClick={() => {deleteBook(_id)}}>
              <i className="large material-icons">delete_forever</i>
            </button>
         </div>
       </form>
  );
};

export default BookList;

action.js

export const deleteBookSuccess = _id => {
  return {
    type: DELETE_BOOK,
    payload: {
      _id
    }
  }
};

export const deleteBook = _id => {
  return (dispatch) => {
    return axios.delete(`${apiUrl}/${_id}`)
      .then(response => {
        dispatch(deleteBookSuccess(response.data))
      })
      .catch(error => {
        throw(error);
      });
  };
};

reducer.js

case DELETE_BOOK:
      let afterDelete = state.filter(book => {
        return book._id !== action.payload._id
      });
      return afterDelete;

最佳答案

如果您不希望按钮触发表单提交，请在type="button"元素中添加button属性。

默认情况下，button提交表单（将type设置为submit）。
设置type="button"表示它没有默认行为。

<form>
  <button type="button">type button doesn't trigger refresh</button>
  <button>no type triggers refresh</button>
</form>