应用 className/onClick/onChange 不适用于自定义 React 组件

IT技术 javascript reactjs events jsx
2021-01-23 07:28:41

我几乎是新手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

Company 类如下所示:

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>
2个回答

原因很简单,当你 onClick 喜欢

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

它不是在组件上设置的事件,而是传递给Company组件并且可以像props.company在 Company 组件中一样访问的props

您需要做的是指定onClick事件并className在 Company 组件中指定

import React, { Component } from 'react';

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

export default Company

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

<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>
)
只是多加一点解释 - 我相信 React 中的默认 HTML 元素具有像普通 HTML 元素一样的 onClick 属性,但是因为自定义 React 组件是由您定义的,所以 onClick 被视为自定义属性,而不是内置的 onclick 属性
2021-03-31 07:28:41
感谢您的回答。但是,我是否还需要指定事件本身,Company或者我是否也可以指定它CompanyList以使用控件进行输入?我的意思是方法editCompany
2021-04-05 07:28:41
event 将在组件级别指定,因此在 Company 组件本身中,您需要调用该事件的函数可以通过任何名称传递
2021-04-07 07:28:41

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

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 组件(除了 compagny)的props都转到您的 li 标签。请参阅 ES6 扩展运算符和休息。