应用className / onClick / onChange不能处理Custom React Component [英] Applying className/onClick/onChange not working on Custom React Component

问题描述

我几乎不知道反应。
我正在尝试创建一个简单的编辑和创建掩码。
以下是代码：

I'm almost new to react. I'm trying to create a simple editing and creating mask. Here is the code:

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

我现在的问题是，为什么当我点击公司时， onclick 事件未被触发。

My question now is, why is the onclick event not being fired, when I click on a Company.

在这部分中：

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

推荐答案

原因很简单，当你onClick喜欢

The reason is pretty simple, when you onClick like

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

它不是在组件上设置的事件，而是传递给<的支柱code>公司组件，可以像公司组件中的 props.company 一样访问，

its not an event that is set on the component, rather a prop that is being passed to the Company component and can be accessed like props.company in the Company component,

你需要做的是在公司组件中指定 onClick 事件和 className ，如

what you need to do is to specify the onClick event and className in the Company component like

import React, { Component } from 'react';

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

export default Company

该函数作为prop传递给公司组件可以通过任何名称传递，例如

The function passed on as prop to the Company component can be passed on by any name like

<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>
)

这篇关于应用className / onClick / onChange不能处理Custom React Component的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！