Javascript ReactJS:e.preventDefault（）不是函数

我正在制作一个简单的todo应用程序，其中我加入了编辑和删除todo的逻辑。我正在尝试从子组件更新父状态，但当我尝试单击“删除”时，它会向我抛出一个错误。preventDefault（）不是一个函数，它正在删除所有TODO。以下是组件：

母公司

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} />
......

}

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
listArr:[]，
}
}
删除TODOS（i）{
var list=this.state.listArr；
列表。拼接（i，1）；
this.setState（{listArr:lists}）
}
render（）{
.......
......
}

孩子

export类ToDoList扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
编辑：错，
};
Handledelite（e，i）{
e、 预防默认值（）；
this.props.passDeleteTodos（）
}
renderDisplay（）{
返回(
{
this.props.listArr.map（（列表，i）=>{
返回(
{list}
这是handledelite（i）}
/>

在实现中使用箭头函数时，需要将事件对象传递给

handleDelete

函数

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

handleDelete

函数

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

但是，在进行此更改之后，您仍然需要在父级中绑定

deleteteTodos

函数，因为此函数中的

this

上下文不是React类组件的上下文，您可以这样做

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

或

---

您没有向相应的方法发送

e

您还可以

绑定该事件
onClick={this.handleDelete.bind（this，i）}

这同样适用于
App
组件中的
deleteTodos

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

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

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

  ...
}

与的行为方式不同，因此您不能期望使用相同的默认调用

但您的问题是绑定参数的顺序发生了变化。因此，绑定参数将成为函数中的第一个。请参阅下面的代码片段


const-App=（）=>{
常量单击=（外部变量，e）=>{
console.log（“PARAMS”，externalVar，e）；
};
常量externalVar=1
返回(
点击我
);
};
ReactDOM.render（，document.getElementById（'root'）；
I更改
e.preventDefault（）=>e.preventDefault
和
bind
函数

范例

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>

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
listArr:[]，
}
this.deleteTodos=this.deleteTodos.bind（this）
}
Handledelite（e，i）{
e、 防止违约；
this.props.passDeleteTodos（）
...
}
render（）{
返回(
{
this.props.listArr.map（（列表，i）=>{
返回(
{list}
这个.Handledelite（e，i）}
/>
)}
}
react中的箭头函数不需要绑定到此函数。
但是在调用函数的过程中，例如调用这个函数handleDelete

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

我们将使用synatx作为：

handleDelete.bind(i)

如果上述代码工作不正常，请尝试此操作

handleDelete(i) {
    this.props.passDeleteTodos()
    ...
}

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

这是因为您需要在parentYeah中绑定
deleteTodos
函数，因此只有在使用Arrow函数时才将事件对象作为参数传递，对吗？正如我在回答中所述，将Arrow函数视为调用另一个函数的函数，因此您需要传递参数，但是在绑定的情况下，它会urns一个新函数，它与上下文和随默认参数一起传递的参数绑定。我现在理解了，谢谢Shubham，您真的很有帮助：）您的第一个示例是不完整的，因为当调用handleDelete函数时，它没有接收到
e
arg.code更新，首先，一个对我也不起作用，但第二个对我起作用
handleDelete.bind(i)

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

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

handleDelete(i) {
    this.props.passDeleteTodos()
    ...
}

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