Question

我正在制作一个简单的待办事项应用程序，我已经在逻辑中编辑和删除待办事项。我试图从子组件更新父状态但是当我试图点击删除时它会给我一个错误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} />
......

}

子

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)}

但是在这个更改之后你仍然需要在父代中绑定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);
  }

Answer 2

我更改了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>

Answer 3

react中的箭头功能不需要绑定到此。但是在调用函数期间，例如调用此函数handleDelete

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

我们将synatx用作：

handleDelete.bind(i)

Answer 4

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)}}

ReactJS：e.preventDefault（）不是函数

4 个答案: