应用className / onClick / onChange不能处理Custom React

Question

应用className / onClick / onChange不能处理Custom React Component我几乎是新手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;         }       );

Answer 1

你必须在你的子组件上绑定事件：

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传播操作员和休息。