React：将 event.preventDefault() 方法添加到功能组件中

Question

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

这是我的示例代码：

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;

Answer 1

如果您不希望按钮触发表单提交，请将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>

Answer 2

preventDefault 方法需要在 event 上调用。但是，在您设置 onClick 处理程序的方式中，event 不会传递给您的处理程序。

以下是解决此问题的方法（在 bookList.js 中）：

import React from 'react';

const BookList = ({ book: { author, publication, publisher, _id }, deleteBook }) => {

  const handleClick = event => {
    event.preventDefault();
    deleteBook(_id);
  }

  return (
        <form>
          <div>
            <h2>{author}</h2>
            <p>{publication}</p>
            <p>{publisher}</p>
            <button onClick={ handleClick }>
              <i>delete_forever</i>
            </button>
         </div>
       </form>
  );
};

所以onClick 将传递event（默认情况下），然后在event 上调用preventDefault，然后调用deleteBook。

Answer 3

我做了一个简单的说明（组件），其中一个点击事件触发了重新加载，而另一个则没有。如果这对您不起作用，则问题出在另一个地方，这意味着在不同的组件中（您未提供的代码片段）。我希望它会有所帮助，如果不是，也许它会在未来对某人有所帮助:)

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.preventDefault = this.preventDefault.bind(this);
    this.dontPrevent = this.dontPrevent.bind(this);
  }
  
  // handler recieves the `e` event object
  dontPrevent() {
    alert('This page will reload :)');  
  }
  
  preventDefault(e) {
    alert('Page will NOT reload');
    e.preventDefault();
  }
 
  
  render() {
    return (      
      <div>
        <form onSubmit={this.preventDefault}>
         <div>
          <h3>NO Reload Example</h3> 
          <p>
            <button>Submit</button>&nbsp;
          </p>
        </div>
       </form>
       <hr/>
       <form>
         <div>
          <h3>Reload Example</h3> 
          <p>
            <button onClick={this.dontPrevent}>Submit</button>
          </p>
        </div>
       </form>
      </div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
  <div id="app"></div>