Перестал работать onclick. Не понимаю, в чем проблема?

Question

[Кирилл Мухачев]

Пишу сайт на react js. У меня есть основной модуль App, из него я вызываю модуль ShowForm, который при вызове открывает модальное окно, с данные. В подвале окна есть кнопка "Сохранить изменения", при нажатии на которую должна выполнятся функция componentDidMount, но у меня кнопка не работает, и, к сожалению, ничего не отрабатывает. Тут внедрена библиотека Bootstrap, и само модальное окно построено с её помощью

Раньше, когда не внедрял ещё Bootsrtrap, у меня был просто тег , который также открывался по нажатию кнопки. у тега было событие onSubmit(), которое правильно отрабатывало, по нажатию кнопки "Сохранить изменения"

В своем новом проекте я тоже пытался поставить и ему событие onSubmit(), но не работает. Просто ничего не происходит

import React, { Component } from 'react'
import { Button } from 'react-bootstrap';
 
class ShowForm extends Component {
  constructor(props) {
    super(props);
 
    this.initialState = {
      TaskName: this.props.task.TaskName,
      User: this.props.task.User,
      Date: this.props.task.Date,
      Weight: this.props.task.Weight,
      Number: this.props.task.Number,
      Periodicity: this.props.task.Periodicity,
      SMARTTask: this.props.task.SMARTTask,
      GUID: this.props.task.GUID
    };
    this.state = this.initialState;
  }
 
  handleChange = event => {
    const { name, value } = event.target;
 
    this.setState({
      [name]: value
    });
  }
 
  render() {
    const { TaskName, Date, Weight, Number, Periodicity } = this.state;
    const month = Date.substr(6, 4) + '-' + Date.substr(3, 2)
    return (
      <div className='modal fade' id="modal-form-element" data-bs-backdrop="static" aria-labelledby="modal-form-element-label" aria-hidden="true" tabindex="-1">
        <div className="modal-dialog modal-dialog-centered modal-lg">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id='modal-form-element-label'>Цель номер: {Number}</h5>
              <Button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" ></Button>
            </div>
            <div className='modal-body'>
              <div className="form-group">
                <label htmlFor='TaskName' className="col-sm-8 col-form-label">Наименование задачи</label>
                <div className="col-sm-0">
                  <textarea value={TaskName} onChange={this.handleChange} type="text" name='TaskName' className="form-control" placeholder="Наименование" id="TaskName"></textarea>
                </div>
              </div>
 
              <div className="form-group">
                <label htmlFor='Weight' className="col-sm-4 col-form-label">Вес</label>
                <div className="col-sm-0">
                  <input value={Weight} onChange={this.handleChange} type="number" name='Weight' className="form-control" id="Weight" placeholder="Число" />
                </div>
              </div>
 
              <div className="form-group">
                <label htmlFor='Number' className="col-sm-4 col-form-label">Номер задачи</label>
                <div className="col-sm-0">
                  <input value={Number} onChange={this.handleChange} type="number" name='Number' className="form-control" id="Number" placeholder="Число" />
                </div>
              </div>
 
              <div className="form-group">
                <label htmlFor='Date' className="col-sm-2 col-form-label">Месяц</label>
                <div className="col-sm-0">
                  <input value={month} onChange={this.handleChange} type="month" name='Date' className="form-control" id="Date" placeholder="Число" />
                </div>
              </div>
 
              <div className="form-group">
                <label htmlFor='Periodicity' className="col-sm-4 col-form-label">Периодичность</label>
                <div className="col-sm-0">
                  <select value={Periodicity} onChange={this.handleChange} name='Periodicity' className="form-select" id='Periodicity'>
                    <option value="month">Месяц</option>
                  </select>
                </div>
              </div>
 
            </div>
            <div className="modal-footer">
              <Button type="button" className="btn btn-primary" onClick={this.props.componentDidMount(this.state)}>Сохранить изменения</Button>
            </div>
          </div>
        </div>
      </div >
    )
  }
}
 
export default ShowForm

Comments

[omyraucy]

Замените этот код

<div className="modal-footer">
              <Button type="button" className="btn btn-primary" onClick={this.props.componentDidMount(this.state)}>Сохранить изменения</Button>
            </div>

На этот

<div className="modal-footer">
              <Button type="button" className="btn btn-primary" onClick={() => this.props.componentDidMount(this.state)}>Сохранить изменения</Button>
            </div>

Все заработает.

Answer 1

[Антон Шаманов]

<Button
почему имя элемента с большой буквы?
onClick
почему имя атрибут в camelCase?

В своем новом проекте я тоже пытался поставить и ему событие onSubmit(), но не работает.

чтобы оно сработало у тебя должна быть для начала form'а и submit input/button

Comments

[Dmitry Bay]

Button - это компонент
import { Button } from 'react-bootstrap';

onClick
Потому что в реакте так.