Блог

Я создаю модальный параметр в React, который позволит пользователям добавлять элемент в таблицу. Я создаю компонент RecipeModal с формой внутри, и я не получаю ошибок при компиляции, но при нажатии кнопки ничего не происходит. Я очень внимательно следил за руководством, и у меня закончились идеи. Я видел, что у людей были проблемы с ‘fade’ в React, который делает модальный файл полностью прозрачным и поэтому невидимым, но я попытался проверить «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);
  

Состояние чувствительно к регистру. Так что либо вы переименовываете свое modal состояние в Modal

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

или реорганизуйте isOpen реквизит, чтобы <Modal isOpen={this.state.modal} toggle={this.toggle}>

Я предлагаю последнее.