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 - 打开模态对话框（引导程序）

回答

相关问题