javascript - ReactJS:e.preventDefault() 不是函数

Question

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

家长

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>

Answer 1

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

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

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

但是在这个改变之后你仍然需要在父类中绑定(bind) deleteTodos 函数，因为这个函数中的 this 的上下文将不是 React 类的上下文组件，你可以这样做

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

或

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