应用 className/onClick/onChange 不适用于自定义 React 组件 [英] Applying className/onClick/onChange not working on Custom React Component

查看：26
本文介绍了应用 className/onClick/onChange 不适用于自定义 React 组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我几乎是 react 的新手.我正在尝试创建一个简单的编辑和创建蒙版.代码如下:

import React, { Component } from 'react';从./公司"导入公司；类 CompanyList 扩展组件 {构造函数(道具){超级(道具)；this.state = {搜索: ''，公司:props.companies};}更新搜索(事件){this.setState({ 搜索: event.target.value.substr(0,20) })}添加公司(事件){event.preventDefault();让 nummer = this.refs.nummer.value;让 bezeichnung = this.refs.bezeichnung.value;让 id = Math.floor((Math.random()*100) + 1);$.ajax({类型:POST"，上下文:这个，数据类型:json"，异步:真，url: "../data/post/json/companys",数据: ({_token : window.Laravel.csrfToken,编号:编号，bezeichnung : bezeichnung,}),成功:功能(数据){id = 数据.数字；this.setState({公司:this.state.companies.concat({id, nummer, bezeichnung})})this.refs.bezeichnung.value = '';this.refs.nummer.value = '';}});}编辑公司(事件){警报('点击');event.preventDefault();this.refs.bezeichnung.value = company.Bezeichnung;this.refs.nummer.value = company.Nummer;}使成为() {让过滤的公司 = this.state.companies.filter((公司) =>{返回 company.bezeichnung.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;});返回 (<div><div className="row"><div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">这样</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)}/>

<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 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 className="col-xs-12 col-sm-12 col-md-3 col-lg-3"><div className="form-group"><button type="submit" className="btn btn-default">添加新公司</button>

</表单><div className="row"><div className="col-xs-10 col-sm-10 col-md-10 col-lg-10"><ul>{过滤的Companies.map((公司)=> {return <Company company={company} key={company.id} onClick={this.editCompany.bind(this)}/>})}

);}}导出默认公司列表

Company 类如下所示:

import React, { Component } from 'react';const 公司 = ({公司}) =><li>{company.Nummer} {company.Bezeichnung}出口默认公司

我现在的问题是，当我点击 Company 时，为什么没有触发 onclick 事件.

在这部分:

解决方案

原因很简单，当你点赞时

它不是在组件上设置的事件，而是传递给 Company 组件并且可以像 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})出口默认公司

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

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

并像使用

import React, { Component } from 'react';const Company = ({company, editCompany}) =>(
  • {company.Nummer} {company.Bezeichnung}
    • )

    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

    The Company class looks like this:

    import React, { Component } from 'react';

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


export default Company

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

    In this part:

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

    解决方案

    The reason is pretty simple, when you onClick like

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

    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,

    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

    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"/>

    and used like

    import React, { Component } from 'react';

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

    这篇关于应用 className/onClick/onChange 不适用于自定义 React 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆