React-打開模態對話框（引導程序）

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如何推薦它。

UPDATE

現在，我為其創建了一個自己的組件。

該組件如下所示：

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

我為點擊事件創建了狀態和方法：

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
    )

}