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

公司类看起来像这样：

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

它不是在组件上设置的事件，而是传递给Company组件的支柱，可以像公司组件中的props.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组件的prop传递的函数可以通过任何名称传递，如

<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组件的所有道具（exept compagny）转到你的li标签。见ES6传播操作员和休息。

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

2 个答案: