React-Redux with Bootstrap - モーダルコンポーネント

Question

React-ReduxでBootstrapのモーダルを使用してコンポーネントとコンテナの間でコンセプトを適用するのは難しいです。

基本的に、特定のモーダルを再作成する代わりに、モーダルテンプレートを保持するリアクションコンポーネントを作成したいと考えています。私の例を説明するために

は、ここで私が実装したいFCCプロジェクトです：

https://codepen.io/FreeCodeCamp/full/xVXWag/

「レシピを追加」および「編集」と同じ成分を有する、まだときは、それが呼び出されます異なる容器で使用されています（正しい考え方ですか？）。

私は「レシピを追加」のための私のコンテナのいずれかで、次のコードを持っている：これは動作しますが、私はすでにレンダリング機能は、実際のレンダリングを行うコンポーネントを呼び出す必要があることを伝えることができ、

import React, { Component } from 'react'; 
import { Button, Modal } from 'react-bootstrap'; 
import { addRecipe } from '../actions/index'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 


class AddRecipeButton extends Component{ 
    constructor(props){ 
    super(props); 
    this.state = {recipeName: '', userIngredients: '', showModal: false}; 
    this.close = this.close.bind(this); 
    this.open = this.open.bind(this); 
    this.onClickSubmit = this.onClickSubmit.bind(this); 
    this.handleRecipeNameChange = this.handleRecipeNameChange.bind(this) 
    this.handleUserIngredientsChange = this.handleUserIngredientsChange.bind(this) 
    } 
    close() { 
    this.setState({ showModal: false, recipeName: '', userIngredients: '' }); 
    } 
    open() { 
    this.setState({ showModal: true }); 
    } 
    onClickSubmit(){ 
    const splitIngredients = this.state.userIngredients.split(/[ ,]+/) 
    this.props.addRecipe([this.state.recipeName, splitIngredients]) 
    this.setState({ showModal: false, recipeName: '', userIngredients: '' }); 
    } 
    handleRecipeNameChange(event){ 
    this.setState({recipeName: event.target.value}) 
    } 
    handleUserIngredientsChange(event){ 
    this.setState({userIngredients: event.target.value}) 
    } 
    render(){ 
    const centerText = { 
     textAlign : 'center' 
    } 
    return(
     <div> 
     <Button 
      bsStyle="success" 
      onClick={this.open} 
      >Add Recipe 
     </Button> 
     <Modal show={this.state.showModal} onHide={this.close}> 
      <Modal.Header closeButton> 
      <Modal.Title style={centerText}>Add Recipe</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
      <form> 
       <div className="form-group"> 
       <label htmlFor="recipeName">Name of Recipe:</label> 
       <input 
        value={this.state.recipeName} 
        onChange={this.handleRecipeNameChange} 
        type="text" 
        className="form-control" 
        id="recipeName" /> 
       </div> 
       <div className="form-group"> 
       <label htmlFor="userIngredients">Ingredients:</label> 
       <textarea 
        placeholder="you can seperate by comma" 
        onChange = {this.handleUserIngredientsChange} 
        value={this.state.userIngredients} 
        type="text" 
        className="form-control" 
        id="userIngredients" /> 
       </div> 
      </form> 

      </Modal.Body> 
      <Modal.Footer> 
      <Button 
      bsStyle="info" 
      onClick={this.onClickSubmit}>Add Recipe 
      </Button> <Button 
      bsStyle="danger" 
      onClick={this.close}>Close 
      </Button> 
      </Modal.Footer> 
     </Modal> 
     </div> 
    ) 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({addRecipe}, dispatch) 
} 

export default connect(null,mapDispatchToProps)(AddRecipeButton) 

を代わりにモーダル。

私の質問は、モーダルコンポーネントを作成し、モーダルウィンドウの状態を追跡する方法ですか？

EDIT： 好奇心が強い人は、私が働いているものを実装することができました。

モーダルコンポーネント：

import React, { Component } from 'react' 
import { Button, Modal } from 'react-bootstrap'; 

export default (props) => { 
    return (
    <Modal show={props.showModal} onHide={props.toggleModal}> 
     <Modal.Header closeButton> 
     <Modal.Title>{props.title}</Modal.Title> 
     </Modal.Header> 
     <Modal.Body> 
     <form> 
     <div className="form-group"> 
      <label htmlFor="recipeName">Name of Recipe:</label> 
      <input 
      value={props.recipeName} 
      onChange={props.handleRecipeNameChange} 
      type="text" 
      className="form-control" 
      id="recipeName" /> 
     </div> 
     <div className="form-group"> 
      <label htmlFor="userIngredients">Ingredients:</label> 
      <textarea 
      placeholder="you can seperate by comma" 
      onChange = {props.handleUserIngredientsChange} 
      value={props.userIngredients} 
      type="text" 
      className="form-control" 
      id="userIngredients" /> 
     </div> 
     </form> 
     </Modal.Body> 
     <Modal.Footer> 
     <Button 
     bsStyle="info" 
     onClick={props.onClickSubmit}>Add Recipe 
     </Button> <Button 
     bsStyle="danger" 
     onClick={props.toggleModal}>Close 
     </Button> 
     </Modal.Footer> 
    </Modal> 
) 
} 

はこのような何かが仕事とレシピボタンのコンテナ（スマートコンポーネント）

import React, { Component } from 'react'; 
import { Button, Modal } from 'react-bootstrap'; 
import { addRecipe } from '../actions/index'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import MyModal from '../components/mymodal'; 

class AddRecipeButton extends Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     recipeName: '', 
     userIngredients: '', 
     showModal: false 
    }; 

    this.onClickSubmit = this.onClickSubmit.bind(this); 
    this.handleRecipeNameChange = this.handleRecipeNameChange.bind(this) 
    this.handleUserIngredientsChange = this.handleUserIngredientsChange.bind(this) 
    this.toggleModal = this.toggleModal.bind(this); 
    } 
    toggleModal(){ 
    this.setState({ 
     showModal: !this.state.showModal 
    }); 
    } 
    onClickSubmit(){ 
    const splitIngredients = this.state.userIngredients.split(/[ ,]+/) 
    this.props.addRecipe([this.state.recipeName, splitIngredients]) 
    this.toggleModal() 
    } 
    handleRecipeNameChange(event){ 
    this.setState({recipeName: event.target.value}) 
    } 
    handleUserIngredientsChange(event){ 
    this.setState({userIngredients: event.target.value}) 
    } 
    render(){ 
    return (
     <div> 
     <Button 
      bsStyle="success" 
      onClick={this.toggleModal} 
      >Add Recipe 
     </Button> 
     <MyModal 
      toggleModal={this.toggleModal} 
      showModal={this.state.showModal} 
      recipeName={this.state.recipeName} 
      userIngredients={this.state.userIngredients} 
      handleRecipeNameChange={this.handleRecipeNameChange} 
      handleUserIngredientsChange={this.handleUserIngredientsChange} 
      onClickSubmit={this.onClickSubmit} 
     /> 
     </div> 

    ) 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({addRecipe}, dispatch) 
} 

export default connect(null,mapDispatchToProps)(AddRecipeButton) 

Answer 1

を追加します（クイックジョブの種類がありますが、アイデアを得る..？）

// Create a React component for your modal: 

var MyModal = React.createClass({ 
    render: function() { 
     return (
     <Modal onHide={this.props.handleToggle}> 
      <Modal.Header closeButton> 
      <Modal.Title style={centerText}>Add Recipe</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
      <form> 
       <div className="form-group"> 
       <label htmlFor="recipeName">Name of Recipe:</label> 
       <input 
        value={this.props.recipeName} 
        onChange={this.props.handleRecipeNameChange} 
        type="text" 
        className="form-control" 
        id="recipeName" /> 
       </div> 
       <div className="form-group"> 
       <label htmlFor="userIngredients">Ingredients:</label> 
       <textarea 
        placeholder="you can seperate by comma" 
        onChange = {this.props.handleUserIngredientsChange} 
        value={this.props.userIngredients} 
        type="text" 
        className="form-control" 
        id="userIngredients" /> 
       </div> 
      </form> 
      </Modal.Body> 
      <Modal.Footer> 
      <Button 
      bsStyle="info" 
      onClick={this.props.onClickSubmit}>Add Recipe 
      </Button> <Button 
      bsStyle="danger" 
      onClick={this.props.handleToggle}>Close 
      </Button> 
      </Modal.Footer> 
     ) 
    } 
}); 

// Return modal in render function and pass parent components state and functions down through props: 

var AddRecipeButton = React.createClass({ 
    getInitialState: function() { 
    return { 
     isModalOpen: false, 
     recipeName: '', 
     userIngredients: '' 
    }; 
    }, 
    toggleModal: function() { 
    this.setState({ 
     isModalOpen: !this.state.isModalOpen 
    }); 
    }, 
    onClickSubmit(){ 
    const splitIngredients = this.state.userIngredients.split(/[ ,]+/) 
    this.props.addRecipe([this.state.recipeName, splitIngredients]) 
    this.toggleModal(); 
    }, 
    handleRecipeNameChange(event){ 
    this.setState({recipeName: event.target.value}) 
    }, 
    handleUserIngredientsChange(event){ 
    this.setState({userIngredients: event.target.value}) 
    }, 
    renderModal: function() { 
    if (this.state.isModalOpen) { 
     return 
     <MyModal 
      toggleModal={this.toggleModal} 
      onClickSubmit={this.onClickSubmit} 
      handleRecipeNameChange={this.handleRecipeNameChange} 
      handleUserIngredientsChange={this.handleUserIngredientsChange} 
     />; 
    } 
    }, 
    render: function() { 
    {this.renderModal()} 
    } 
});