单击时未出现模态

Question

我正在 React 中创建一个模式，允许用户将项目添加到 table。我创建了一个 RecipeModal 组件，里面有一个表单，编译时没有收到任何错误，但单击按钮时没有任何反应。我非常仔细地学习了一个教程并且运行没有想法。我已经看到人们在 React 中遇到 'fade' 的问题，这使得模态完全清晰并因此不可见，但我尝试检查“Inspect”（DevTools？我不确定它叫什么）'modal' 并没有在那里看到它。我是网络开发的新手，所以如果我应该附上其他东西，请告诉我。我有更多输入字段，但在尝试解决此问题时删除了它们。

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

Answer 1

状态为 case-sensitive。所以要么你将 modal 状态重命名为 Modal

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

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

我建议后者。

单击时未出现模态

Modal Not Appearing onClick

html

javascript

css

reactjs

reactstrap