模态未出现onClick

如何解决模态未出现onClick

我正在React中创建一个模态，该模态将允许用户向表中添加项目。我创建了一个内部带有窗体的RecipeModal组件，并且在编译时没有收到任何错误，但是单击按钮时没有任何反应。我非常仔细地遵循了一个教程，但想法不多了。我已经看到人们在React中遇到“淡入淡出”的问题，从而使模态完全清晰并因此变得不可见，但是我尝试在“检查”（DevTools？我不确定它叫什么）中检查“模态”，并且在那没看到它。我是Web开发的新手，所以让我知道是否应该附加其他内容。我有更多输入字段，但在尝试解决此问题时将其删除。

import React,{ Component } from 'react';
import { Button,Modal,ModalHeader,ModalBody,Form,FormGroup,Label,Input } from 'reactstrap';

import { connect } from 'react-redux';
import { addRecipe } from '../action/recipeActions';

class RecipeModal extends Component {

  state = {
    modal: false,recipe_name: '',recipe_description: '',recipe_ingredients: '',recipe_steps: ''
  }
  toggle = (e) => {
    this.setState({
      modal: !this.state.modal
    });
  }
  onChange = (e) => {
    this.setState(
      { [e.target.recipe_name]: e.target.value }
    );
  }

  render() {

    return (
      <div>
        <Button
          color="dark"
          style={{ marginBotton: '2rem' }}
          onClick={this.toggle}
        >Add Recipe</Button>

        <Modal
          isOpen={this.state.Modal}
          toggle={this.toggle} >
          <ModalHeader toggle={this.toggle}>Add a New Recipe</ModalHeader>
          <ModalBody>
            <Form onSubmit={this.onSubmit}>
              <FormGroup>
                <Label for="recipe">Recipe</Label>
                <Input
                  type="text"
                  recipe_name="recipe_name"
                  id="recipe"
                  placeholder="Add recipe name"
                  OnChange={this.onChange} />

              </FormGroup>
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

export default connect()(RecipeModal);

解决方法

状态区分大小写。因此，您可以将modal状态重命名为Modal

state = {
  Modal: false,...
};

或将isOpen道具重构为<Modal isOpen={this.state.modal} toggle={this.toggle}>

我建议后者。