Question

首先，我几乎是reactjs新手。我想创建一个简单的编辑掩码，以深入reactjs。这种情况的“最佳实践”是什么？

我有一个页面，您只需添加，更改或删除公司条目即可。我想要实现的是，当我点击公司条目时，打开一个模态对话框窗口。然后，在模态对话框窗口中，用户可以修改或删除该条目。

首先我创建了一个CompanyList组件。

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 = '';
          }
      });
    }

    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">Search</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">Create new entry</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="New company no." 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="New company name" 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 (
                    <div>
                      <Company company={company} key={company.id} />
                    </div>
                  );
                })
              }
              </ul>
            </div>
          </div>
        </div>
        );
    }
}

export default CompanyList

Company组件如下所示：

import React, { Component } from 'react';

class Company extends Component {

    constructor(props) {
        super(props);
        this.state = {
            company: props.company,
            onClick: props.onClick
        };
    }

    render() {
        return (
            <div>
                <li>
                    <div className="cursorPointer" >
                        {this.props.company.nummer} {this.props.company.bezeichnung} 
                    </div>
                </li>
            </div>
        );
    }
}

export default Company

我现在的问题是，如何以及在何处实施模态对话框？最佳做法是为其创建自己的组件，例如CompanyOptions？它应该是Company中添加的CompanyList或更好的一个组件的一部分吗？但是，如何将当前Company传递给模态对话框。对不起，如果我问的问题太多了。但我想了解reactjs中的推荐方式。

更新

现在我已经为它创建了一个自己的组件。

此组件如下所示：

import React, { Component } from 'react';


class CompanyOptions extends Component {

    constructor(props) {
        super(props);
        this.state = {
            company: props.company,
            css: props.css,
            onClick: props.onClick
        };
    }

    render() {
        return (
            <div>      
              <div className={this.state.css} tabindex="-1" role="dialog">
                <div className="modal-dialog" role="document">
                  <div className="modal-content">
                    <div className="modal-header">
                      <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 className="modal-title">Company entry "{this.state.company.bezeichnung}"</h4>
                    </div>
                    <div className="modal-body">
                      <p>One fine body&hellip;</p>
                    </div>
                    <div className="modal-footer">
                      <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="button" className="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        );
    }
}

export default CompanyOptions

在Company组件中，我这样渲染：

render() {

return (
    <div>
        <li>
            <div className="cursorPointer" onClick={this.toggleOptionFields.bind(this)}>
                {this.props.company.nummer} {this.props.company.bezeichnung} 
            </div>
            <CompanyOptions company={this.state.currentCompany} css={this.state.optionFieldsCss} />
...

我为click事件创建了一个状态和方法：

constructor(props) {
    super(props);
    this.state = {
        company: props.company,
        onClick: props.onClick,
        editFieldsCss: "displayNone",
        optionFieldsCss: "modal fade",
        currentCompany: props.company,
    };
}

和方法：

toggleOptionFields() {
    var css = (this.state.optionFieldsCss === "modal fade in displayBlock") ? "modal fade" : "modal fade in displayBlock";
    this.setState({
        "optionFieldsCss":css,
        currentCompany: this.company
    });
}

但是当我点击公司时，组件调用中的css会更新。但不是组件本身：

为什么呢？有人有想法吗？

Answer 1

最好的方法是为模态创建一个新组件。这样它就可以重复使用。

然后您可以将它包含在您需要的地方，您可以通过道具将所有公司信息发送到该模式。

添加州属性showModal并将其设置为false。然后onClick事件将showModal更改为true。然后，在render方法中，您可以查看if(this.state.showModal)，然后显示模态。

你的州：

constructor(props){
   super(props);
   this.state = {
       showModal: false,
       currentCompanyName: "",
       currentCompanyNumber: ""
   }
}

然后onClick事件：

handleClick(currentCompanyName, currentCompanyNumber){
   this.setState({
       showModal: true,
       currentCompanyName: currentCompanyName,
       currentCompanyNumber: currentCompanyNumber
   })
}

然后在你的渲染中：

render(){
    if(this.state.showModal)
       return <MyModal companyName={this.state.currentCompanyName} companyNumber={this.state.currentCompanyNumber} />

    return (
       //Rest of the code
    )

}

React - Open Modal Dialog（Bootstrap）

1 个答案: