Javascript 模态不出现在单击上

我正在React中创建一个模式，允许用户向表中添加项。我创建了一个包含表单的RecipeModal组件，编译时没有收到任何错误，但单击按钮时什么也没有发生。我非常仔细地学习了一个教程，已经没有什么想法了。我见过人们在React中出现“淡入”问题，这会使模态完全清晰，因此不可见，但我尝试在“检查”（DevTools？我不知道它叫什么）中检查“模态”，但没有看到它。我对网络开发非常陌生，所以如果我需要附加其他东西，请告诉我。我有更多的输入字段，但在尝试修复时删除了它们

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);

import React，{Component}来自'React'；
从“reactstrap”导入{Button，Modal，ModalHeader，ModalBody，Form，FormGroup，Label，Input}；
从'react redux'导入{connect}；
从“../action/recipeActions”导入{addRecipe}；
类RecipeModal扩展组件{
状态={
莫代尔：错，
配方名称：“”，
配方说明：“”，
配方和配料：''，
配方\u步骤：“”
}
切换=（e）=>{
这是我的国家({
模态：！this.state.modal
});
}
onChange=（e）=>{
这是我的国家(
{[e.target.recipe_name]：e.target.value}
);
}
render（）{
返回(
添加配方
添加新配方
配方
);
}
}
导出默认连接（）（RecipeModal）；

状态区分大小写。因此，您可以将

modal

状态重命名为

modal

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

或将

isOpen

道具重构为

我建议后者