Question

无法执行已在Class组件中声明的函数，该函数已传递给函数组件。在类中声明了一个openBookDetails，并且可以正常执行。我使用相同的逻辑来实现deleteQuote函数，但得到了TypeError: _deleteQuote is not a function

当我单击按钮时，我试图在TableRow内执行一个函数，但是出现类型错误。

import Modal from '../Modal/Modal'
import add from '../../images/add.png'
import addSelected from '../../images/addSelected.png'
import './Dashboard.css'

const TableRow = ({ row, openBookDetails, deleteQuote }) => (
  <tr >
    <th scope="row" onClick={openBookDetails}>{row.author}</th>
    <td onClick={openBookDetails}>{row.quote}</td>
    <td><i className="fa fa-close" onClick={deleteQuote}></i></td>
  </tr>
)

const Table = ({ data, openBookDetails, deleteQuote }) => (
  <table className="table table-hover">
    <thead>
      <tr className="table-active">
        <th scope="col">Author</th>
        <th scope="col">Quote</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      {data.map((row, index) =>
        <TableRow key={index} row={row} openBookDetails={() => openBookDetails(row, index)}  deleteQuote={() => deleteQuote()}/>
      )}
    </tbody>
  </table>

)

class Dashboard extends Component {
  constructor() {
    super()

    this.state = {
      quotes: [
        {
          "quote": "Our industry does not respect tradition - it only respects innovation.",
          "author": "Satya Nadella",
          "position": "CEO of Microsoft"
        },
        {
          "quote": "Engineering is the closest thing to magic that exists in the world.",
          "author": "Elon Musk",
          "position": "Tesla and SpaceX CEO"
        },
        {
          "quote": "For me, it matters that we drive technology as an equalizing force, as an enabler for everyone around the world.",
          "author": "Sundar Pichai",
          "position": "CEO of Google"
        }
      ],
      addSource: add,
      isModalOpen: false,
      index: '',
      author: '',
      quote: ''
    }
  }

  onAddMouseOver = () => {
    this.setState({ addSource: addSelected })
  }

  onAddMouseOut = () => {
    this.setState({ addSource: add })
  }

  toggleModalOpenOrClose = () => {
    this.setState({ isModalOpen: !this.state.isModalOpen })
    this.setState({index: ''})
    this.setState({author: ''})
    this.setState({quote: ''})
  }

  openBookDetails = (row, index) => {
    console.log('Row Clicked');
    // console.log(index);
    // console.log(row)
    // console.log(row.author)
    // console.log(row.quote)
    // console.log(this.state.quotes[row])
    // console.log(index)
    this.setState({ isModalOpen: true});


    this.setState({ index: index });
    this.setState({ author: row.author });
    this.setState({ quote: row.quote });
  }

  deleteQuote = () => {
    this.setState({isModalOpen: false})
    console.log('Row deleted')
  }

  addNewQuote = () => {
    var quote = {
      "quote": "There is no corruption in the system. The system is correuption",
      "author": "Unknown",
      "position": "Unknown"
    }
    console.log(this.state)
    var quotes = this.state.quotes.concat(quote);
    this.setState({ quotes: quotes });
  }

  render() {
    return (
      <div class='pt-3'>
        <Table 
          data={this.state.quotes}
          openBookDetails={this.openBookDetails} />
        <div className='text-center align-items-center justify-content-centerpt-5'>
          <a href='#add' onClick={this.toggleModalOpenOrClose}>
            <img src={this.state.addSource} className='addButton mx-1' alt="add" onMouseOver={this.onAddMouseOver} onMouseOut={this.onAddMouseOut} />
          </a>
        </div>
        <Modal
          isModalOpen={this.state.isModalOpen}
          toggleModalOpenOrClose={this.toggleModalOpenOrClose}
          state={this.state}
          addNewQuote={this.addNewQuote} />
      </div>
    )
  }
}

export default Dashboard

When I click the ```<i className="fa fa-close" onClick={deleteQuote}></i>``` inside of the ```TableRow``` component I expect it to execute the ```deleteQuote``` function

Answer 1

您需要在Dashboard组件中调用deleteQuote函数作为对Table组件的支持，以便在Table组件中进行访问

因此，您需要在仪表板组件中的以下行更改

更改

  <Table 
      data={this.state.quotes}
      openBookDetails={this.openBookDetails} />

收件人

   <Table 
      data={this.state.quotes}
      openBookDetails={this.openBookDetails}
      deleteQuote={this.deleteQuote} />

_deleteQuote不是函数

1 个答案: