Не работает onClick у кнопки
Пишу сайт на 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="Добавить" className="btn btn-primary" onClick={this.props.componentDidMount(this.state)}>Сохранить изменения</Button>
</div>
</div>
</div>
</div >
)
}
}
export default ShowFormя решил переписать код и сделать в этом же модуле обращение в серверу
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;
this.saveChanges = this.saveChanges.bind(this)
}
handleChange = event => {
const { name, value } = event.target;
this.setState({
[name]: value
});
}
saveChanges() {
const url = 'http://xxxxxxxxx/';
const data = JSON.stringify(this.state);
this.sendData(url, data);
}
async sendData(url, data) {
const responce = await fetch(url, {
method: 'POST',
body: data,
})
if (!responce.ok) {
throw new Error(`Ошибка по адресу ${url}, статус ошибки: ${responce.status}`);
}
return responce.body;
}
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 variant='primary' className="btn btn-primary" onClick={() => this.saveChanges}>Сохранить изменения</Button>
</div>
</div>
</div>
</div >
)
}
}но все равно почему-то не работает событие onClick у кнопки. Вообще не понимаю в чем проблема(
Источник: Stack Overflow на русском