应用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&nbsp;React,&nbsp;{&nbsp;Component&nbsp;}&nbsp;from&nbsp;'react';const&nbsp;Company&nbsp;=&nbsp;({&nbsp;company,&nbsp;onClick&nbsp;})&nbsp;=>&nbsp; &nbsp;&nbsp;&nbsp;<li&nbsp;onClick={onClick}> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{company.Nummer}&nbsp;{company.Bezeichnung} &nbsp;&nbsp;&nbsp;</li>export&nbsp;default&nbsp;Company要么const&nbsp;Company&nbsp;=&nbsp;({&nbsp;company,&nbsp;...props&nbsp;})&nbsp;=>&nbsp; &nbsp;&nbsp;&nbsp;<li&nbsp;{...props}> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{company.Nummer}&nbsp;{company.Bezeichnung} &nbsp;&nbsp;&nbsp;</li>如果你想要传递给你的Compagny组件（exept compagny）的所有道具都转到你的li标签。看ES6传播操作员和休息。