React - Open Modal Dialog（ブートストラップ）

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の一部であるか、またはより良い1つのコンポーネントがCompanyListに追加されますか？しかし、どのように現在のCompanyをモーダルダイアログに渡すか。 申し訳ありませんが、私はあまりにも多くの質問をしています。しかし、私はそれがどのように推薦されるのかを知りたいですreactjs。

UPDATE

今、私はそれのために独自のコンポーネントを作成しました。

このコンポーネントは、次のようになります。

：私は国家とクリックイベントのための方法を作成しました

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

：私はそれをこのようにレンダリングCompanyコンポーネントで

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 

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 
    ) 

}