Question

查看React's Bootstrap Document on Modal，似乎需要一个州来打开/关闭模态窗口。

如果我错了（我仍然是React的新手），请纠正我，但对于无状态组件（或哑组件）只是意味着它只关心什么东西喂入它（通过道具），因此它不关心国家。这意味着它是一个可重复使用的组件，对吗？

如果我要重用React-Bootstrap的模态，我将如何处理showModal状态，如文档中所示？

有关说明，请查看此demo from FCC

您可以看到Add Recipe和Edit正在使用相同的Modal窗口。

我试图复制它，但我不认为我做得不对：

的src /组件/ mymodal.js

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

export default (props) => {
  const centerText = {
    textAlign : 'center'
  }
  return (
    <Modal show={props.showModal} onHide={props.toggleModal}>
      <Modal.Header closeButton>
        <Modal.Title style={centerText}>{props.modalTextTitle}</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}>{props.modalTextTitle}
        </Button> <Button
        bsStyle="danger"
        onClick={props.toggleModal}>Close
        </Button>
      </Modal.Footer>
    </Modal>
  )
}

的src /容器/ add_recipe.js

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()
    this.setState({
      recipeName: '',
      userIngredients: ''
    })
  }
  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}
          modalTextTitle={'Add Recipe'}
        />
      </div>
    )
  }
}

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

export default connect(null,mapDispatchToProps)(AddRecipeButton)

你可以在我的 add_recipe.js容器中看到，我必须发送许多道具。

Answer 1

哑或表现性成分通常没有状态。如果他们这样做，那就是UI状态，而不是与应用程序数据相关的东西。为了重用它们，它们无法连接到应用程序的Redux商店。你必须保持严格。

看起来你正朝着正确的方向前进，但你的MyModal与实施过于紧密相关。使用this.props.children传递模式其内容（使用this.props.children在Dumb组件中非常常见）。这样，您就可以更轻松地重复使用它。

如何在Redux中重用Bootstrap的模态

1 个答案: