Applicazione className / onClick / onChange non funziona su Custom React Component

Sono quasi nuovo di react . Sto cercando di creare un semplice editing e creare una maschera. Ecco il codice:

 import React, { Component } from 'react'; import Company from './Company'; class CompanyList extends Component { constructor(props) { super(props); this.state = { search: '', companies: props.companies }; } updateSearch(event) { this.setState({ search: event.target.value.substr(0,20) }) } addCompany(event) { event.preventDefault(); let nummer = this.refs.nummer.value; let bezeichnung = this.refs.bezeichnung.value; let id = Math.floor((Math.random()*100) + 1); $.ajax({ type: "POST", context:this, dataType: "json", async: true, url: "../data/post/json/companies", data: ({ _token : window.Laravel.csrfToken, nummer: nummer, bezeichnung : bezeichnung, }), success: function (data) { id = data.Nummer; this.setState({ companies: this.state.companies.concat({id, nummer, bezeichnung}) }) this.refs.bezeichnung.value = ''; this.refs.nummer.value = ''; } }); } editCompany(event) { alert('clicked'); event.preventDefault(); this.refs.bezeichnung.value = company.Bezeichnung; this.refs.nummer.value = company.Nummer; } render() { let filteredCompanies = this.state.companies.filter( (company) => { return company.bezeichnung.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1; } ); return ( 
Suche
Neuen Eintrag erfassen
    { filteredCompanies.map((company)=> { return }) }
); } } export default CompanyList

La class aziendale si presenta così:

 import React, { Component } from 'react'; const Company = ({company}) => 
  • {company.Nummer} {company.Bezeichnung}
  • export default Company

    La mia domanda ora è, perché l’evento onclick non viene licenziato quando faccio clic su una Company .

    In questa parte:

      
      { filteredCompanies.map((company)=> { return }) }

    Il motivo è piuttosto semplice, quando si fa clic su onClick

      

    non è un evento impostato sul componente, piuttosto un object che viene passato al componente Company e accessibile come props.company nel componente aziendale,

    ciò che devi fare è specificare l’evento onClick e className nel componente Company come

     import React, { Component } from 'react'; const Company = ({company, onClick, className}) => ( 
  • {company.Nummer} {company.Bezeichnung}
  • ) export default Company

    La funzione trasmessa come prop al componente Company può essere passata con qualsiasi nome come

      

    e usato come

     import React, { Component } from 'react'; const Company = ({company, editCompany}) => ( 
  • {company.Nummer} {company.Bezeichnung}
  • )

    devi associare l’evento al tuo componente figlio:

     import React, { Component } from 'react'; const Company = ({ company, onClick }) => 
  • {company.Nummer} {company.Bezeichnung}
  • export default Company

    o

     const Company = ({ company, ...props }) => 
  • {company.Nummer} {company.Bezeichnung}
  • se vuoi che tutti gli oggetti di scena siano passati al tuo componente della Compagnia (eccetto compagni) vai al tuo tag li. vedere ES6 spread operatore e rest.