javascript ReactJS：e.preventDefault() 不是函数

ReactJS: e.preventDefault() is not a function

提问by Asche

I'm making a simple todo app, where i have put in the logic to edit and delete the todos as well. I'm trying to update the parent state from child component but when i'm trying to click on delete it is throwing me an error e.preventDefault() is not a function and it is removing all of the todos here are the components:

我正在制作一个简单的待办事项应用程序，我已经在其中放入了编辑和删除待办事项的逻辑。我正在尝试从子组件更新父状态，但是当我尝试单击删除时，它向我抛出错误 e.preventDefault() 不是函数，它正在删除所有待办事项，这里是组件：

PARENT

家长

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
       listArr: [],
    }

  }


 deleteTodos(i) {
   var lists = this.state.listArr;
   lists.splice(i, 1);
   this.setState({listArr: lists})
 }

render() {
 .......
 <ToDoList {...this.state} passDeleteTodos={this.deleteTodos} />
......

}

CHILD

孩子

export class ToDoList extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
              editing: false,
            };

        handleDelete(e, i) {
            e.preventDefault();
            this.props.passDeleteTodos()
        }


    renderDisplay() {
        return(
          <div>
           {
            this.props.listArr.map((list,i) => {
               return(
                 <div key={i} index={i} ref="text">
                  <li>{list}
                    <div style={{float: 'right'}}>
                     <button className="btn btn-danger btn-xs glyphicon glyphicon-trash"
                             onClick={() => this.handleDelete(i)}
                     />
                    </div>
                </div>
          </div>

回答by Shubham Khatri

You need to pass the event object to handleDeletefunction when you make use of Arrow function as done in your implementation.

handleDelete当您在实现中使用 Arrow 函数时，您需要将事件对象传递给函数。

You can think of an arrow function like a function that calls another function to which you need to pass the arguments. Event object is a parameter to the arrow function and you indeed need to pass this on to the handleDeletefunction

您可以将箭头函数视为调用另一个需要传递参数的函数的函数。事件对象是箭头函数的参数，您确实需要将其传递给handleDelete函数

onClick={(e) => this.handleDelete(e, i)}

However after this change you still need to bind the deleteTodosfunction in the parent, since the context of thisinside this function won't be that of the React class component, you can do it like

但是，在此更改之后，您仍然需要deleteTodos在父级中绑定该函数，因为this此函数内部的上下文不会是 React 类组件的上下文，您可以这样做

deleteTodos = (i) =>  {
   var lists = this.state.listArr;
   lists.splice(i, 1);
   this.setState({listArr: lists})
 }

or

或者

constructor(props){
    super(props);
    this.state = {
       listArr: [],
    }
    this.deleteTodos = this.deleteTodos.bind(this);
  }

回答by Alex Montoya

I change e.preventDefault() => e.preventDefaultand bindthe function.

我改变e.preventDefault() => e.preventDefault和bind功能。

Example

例子

export default class App extends React.Component {
 constructor(props) {
   super(props)
   this.state = {
    listArr: [],
   }

  this.deleteTodos = this.deleteTodos.bind(this)

  }
  handleDelete(e, i) {
        e.preventDefault;
        this.props.passDeleteTodos()
        ...
    }

   render() {
    return(
      <div>
       {
        this.props.listArr.map((list,i) => {
           return(
             <div key={i} index={i} ref="text">
              <li>{list}
                <div style={{float: 'right'}}>
                 <button className="btn btn-danger btn-xs glyphicon glyphicon-trash"
                         onClick={(e,i) => this.handleDelete(e,i)}
                 />
                </div>
            </div>
       )}
      }
      </div>

回答by Anchit Jain

arrow function in react doesn't need to bind to this. But during call to the functions, for example to call this function handleDelete

反应中的箭头函数不需要绑定到这个。但是在调用函数的过程中，例如调用这个函数handleDelete

 handleDelete(e, i) {
        e.preventDefault();
        this.props.passDeleteTodos()
    }

we will use synatx as:

我们将使用 Synatx 作为：

handleDelete.bind(i)

回答by mersocarlin

You are not sending eto the correspondent method.

您没有发送e到相应的方法。

You could also bindthe event onClick={this.handleDelete.bind(this, i)}

你也可以bind参加活动 onClick={this.handleDelete.bind(this, i)}

Same applies for deleteTodosin the Appcomponent.

同样适用deleteTodos于App组件。

Either way you can use the same approach or bind it in the constructor:

无论哪种方式，您都可以使用相同的方法或将其绑定到构造函数中：

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
       listArr: [],
    }

    this.deleteTodos = this.deleteTodos.bind(this)
  }

  ...
}

回答by Jo?o Cunha

doesn't behave the same way as an so you can't expect the same preventDefault call.

与 an 的行为方式不同，因此您不能期待相同的 preventDefault 调用。

But your problem is you in bind the order of params change. So you're binded param becomes first in the function. See my snippet below.

但是您的问题是您绑定了参数更改的顺序。所以你被绑定 param 成为函数中的第一个。请参阅下面的我的片段。

const App = () => {
  const _click = (externalVar, e) => {
    console.log("PARAMS", externalVar, e);
  };
  
  const externalVar = 1
  
  return (
    <button onClick={_click.bind(undefined, externalVar)}>click me</button>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<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="root"></div>

Like it says here

像它说在这里

fun.bind(thisArg[, arg1[, arg2[, ...]]])

arg1, arg2, ... Arguments to prependto arguments provided to the bound function when invoking the target function.

arg1, arg2, ...在调用目标函数时附加到提供给绑定函数的参数的参数。