应用className / onClick / onChange在自定义React组件上不起作用
我几乎是新的react 。 我正在尝试创build一个简单的编辑和创build蒙版。 这里是代码：
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
公司类看起来像这样：
import React, { Component } from 'react'; const Company = ({company}) => <li> {company.Nummer} {company.Bezeichnung} </li> export default Company
我现在的问题是，当点击Company时，为什么onclick事件不会被解雇。
在这个部分：
<ul> { filteredCompanies.map((company)=> { return <Company company={company} key={company.id} onClick={this.editCompany.bind(this)} className="Company"/> }) } </ul>
原因很简单，当你点击
<Company company={company} key={company.id} onClick={this.editCompany.bind(this)} />
它不是在组件上设置的事件，而是传递给Company组件的道具，可以像公司组件中的props.company一样访问，
你需要做的是在Company组件中指定onClick事件和className
import React, { Component } from 'react'; const Company = ({company, onClick, className}) => ( <li onClick={onClick} className={className}> {company.Nummer} {company.Bezeichnung} </li> ) export default Company
传递给Company组件的函数可以通过任何名称传递
<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> )
你必须绑定你的子组件事件：
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组件（exept compagny）去你的li标签。 见ES6扩散运营商和rest。
