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

首先，我幾乎是新的reactjs。我想爲reactjs創建一個簡單的編輯蒙版。這種情況的「最佳實踐」是什麼？React - 打開模態對話框（引導程序）

我有一個頁面，您只需添加，更改或刪除公司條目。我想要實現的是打開模式對話窗口，當我點擊公司條目時。在模態對話窗口中，用戶可以修改或刪除條目。

首先我創建了一個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分量I呈現這樣說：

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被更新。但不是在組件本身：

爲什麼？任何人有個想法？

來源

2017-06-13 dns_nx

最好的方法是創建一個模態的新組件。這樣它就可以重用。

然後你可以將它包含在你需要的地方，你可以通過道具發送所有公司信息到那個模式。

添加一個狀態屬性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 
    ) 

}

來源

2017-06-13 08:21:16 Boky

感謝您的提示，但它實際上並沒有很好地工作。請參閱我更新的帖子。 –

@dns_nx如果在'CompanyOptions'模式中使用'this.props.css'而不是'this.state.css'？ – Boky

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

回答

相關問題