クラス名を適用する/ onClick/onChangeカスタムリアクションコンポーネントで作業しない

Question

私はほとんどreactに新しくなりました。 私は簡単な編集とマスクの作成を試みています。 ここでは、コードです：

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 (
     <div> 
      <div className="row"> 
      <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">Suche</div> 
      <div className="col-xs-12 col-sm-12 col-md-9 col-lg-9"> 
       <div className="form-group"> 
       <input className="form-control" type="text" value={this.state.search} placeholder="Search" onChange={this.updateSearch.bind(this)} /> 
       </div> 
      </div> 
      </div> 
      <form onSubmit={this.addCompany.bind(this)}> 
      <div className="row"> 
       <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">Neuen Eintrag erfassen</div> 
       <div className="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
       <div className="form-group"> 
        <input className="form-control" type="text" ref="nummer" placeholder="Nummer" required /> 
       </div> 
       </div> 
       <div className="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
       <div className="form-group"> 
        <input className="form-control" type="text" ref="bezeichnung" placeholder="Firmenname" required /> 
       </div> 
       </div> 
       <div className="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
       <div className="form-group"> 
        <button type="submit" className="btn btn-default">Add new company</button> 
       </div> 
       </div> 
      </div> 
      </form> 
      <div className="row"> 
      <div className="col-xs-10 col-sm-10 col-md-10 col-lg-10"> 
       <ul> 
       { 
       filteredCompanies.map((company)=> { 
        return <Company company={company} key={company.id} onClick={this.editCompany.bind(this)} /> 
       }) 
       } 
       </ul> 
      </div> 
      </div> 
     </div> 
     ); 
    } 
} 

export default CompanyList 

Companyクラスは次のようになります。

import React, { Component } from 'react'; 

const Company = ({company}) => 
    <li> 
    {company.Nummer} {company.Bezeichnung} 
    </li> 


export default Company 

私の質問は今、なぜonclickイベントは、私がCompanyをクリックすると、解雇されていませんが。この部分で

：

 <ul> 
     { 
     filteredCompanies.map((company)=> { 
      return <Company company={company} key={company.id} onClick={this.editCompany.bind(this)} className="Company"/> 
     }) 
     } 
     </ul> 

Answer 1

あなたは

<Company company={company} key={company.id} onClick={this.editCompany.bind(this)} /> 

のようなコンポーネントに設定されていない場合、渡されているという小道具をonclickのとき理由は、非常に単純ですCompanyコンポーネントにアクセスし、会社コンポーネントのprops.companyのようにアクセスできます。

を指定する必要がありますCompany成分に支柱として渡さ

import React, { Component } from 'react'; 

const Company = ({company, onClick, className}) => (
    <li onClick={onClick} className={className}> 
    {company.Nummer} {company.Bezeichnung} 
    </li> 
) 

export default Company 

関数のような会社成分中イベントとclassNameは

<Company company={company} key={company.id} editCompany={this.editCompany.bind(this)} className="Company"/> 

ような任意の名前によって渡さと

import React, { Component } from 'react'; 

const Company = ({company, editCompany}) => (
    <li onClick={editCompany}> 
    {company.Nummer} {company.Bezeichnung} 
    </li> 
) 

Answer 2

ように使用することができます

あなたの子コンポーネントのイベントをバインドする必要があります：

import React, { Component } from 'react'; 

const Company = ({ company, onClick }) => 
    <li onClick={onClick}> 
     {company.Nummer} {company.Bezeichnung} 
    </li> 


export default Company 

または

const Company = ({ company, ...props }) => 
    <li {...props}> 
     {company.Nummer} {company.Bezeichnung} 
    </li> 

あなたCOMPAGNYコンポーネント（COMPAGNY exept）に渡されたすべての小道具は、あなたのliタグに行くことにしたい場合

。 ES6スプレッド演算子と休憩を参照してください。