Question

我试图从toDo.js调用函数deleteToDo，但是当我单击按钮时，它没有console.log任何东西。它也没有给我任何错误。任何帮助将不胜感激，这可能是一个非常简单的问题，但是我很新来做出反应。

app.js：

import React, { Component } from 'react';
import './App.css';
import ToDo from "./components/ToDo.js"

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      todos: [
        {description: 'Walk the cat', isCompleted: false},
        {description: 'Throw the dishes away', isCompleted: false},
        {description: 'Buy new dishes', isCompleted: false}
      ],
       newTodoDescription: ''
    };
  }

  deleteToDo(){
    console.log("test");
  }

  render() {
    return (
      <div className="App">
       <ul>
        <ToDo/>
       </ul>
      </div>
    );
  }
}

export default App;

todo.js：

import React, { Component } from "react";

class ToDo extends Component{
  render(){
    return(
      <li>
        <button onClick={this.props.deleteToDo}>Delete</button>
      </li>
    );
  }
}

export default ToDo;

Answer 1

扩展您的app.js。您应该通过道具传递函数的引用。

<ToDo deletetodo={this.deleteTodo} />

希望这会有所帮助！

Answer 2

这是因为您没有将deleteToDo函数传递给ToDo组件。

// app.js
  deleteToDo = ()=>{
    console.log("test");
  }

  render() {
    return (
      <div className="App">
       <ul>
        <ToDo deleteToDo={this.deleteToDo}/>
       </ul>
      </div>
    );
  }

React.js按钮未从另一个文件调用函数

2 个答案: