У меня проблема с моим приложением: когда пользователь набирает (и, я полагаю, onChange запускается), даже одну букву, событие onClick ниже запускается. В чем моя ошибка? Я упростил код (там, где вы видите комментарии), там нет соответствующего кода! Спасибо всем!
class Project extends React.Component {
constructor() {
super();
this.state = {
section_title: '',
sections: []
}
this.handleChangeEvent = this.handleChangeEvent.bind(this);
this.createSection = this.createSection.bind(this);
this.getSections = this.getSections.bind(this);
}
handleChangeEvent(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
createSection(project_id) {
if (this.state.section_title != '') {
//Do Something here
}
}
getSections(project_id) {
//Fetch data here
}
componentDidMount() {
let project_data = this.props.project[0];
this.getSections(project_data.uid);
}
render() {
let project_data = this.props.project[0];
return (
<div>
<h2 className = "ui header">
<i className = "folder outline icon"></i>
<div className = "content">
{project_data.title}
<div className = "sub header">{he.decode(project_data.description)}</div>
</div>
</h2>
<div className = "ui divider"></div>
<Modal trigger = {<Button color = "teal">Add New Section</Button>} closeIcon>
<Modal.Header>Add new section</Modal.Header>
<Modal.Content image>
<Modal.Description>
<Form>
<Form.Field>
<label>Section Name</label>
<input name = "section_title" placeholder='Es: Slider ecc...' value = {this.state.section_title} onChange = {this.handleChangeEvent} />
</Form.Field>
<Button color = "green" type='submit' onClick = {this.createSection(project_data.uid)}>Crea Sezione</Button>
</Form>
</Modal.Description>
</Modal.Content>
</Modal>
</div>
);
}
}





То, что вы сделали, в основном использовало возвращаемые данные вашей функции createSection для вашего onClick.
Итак, на вашем onClick попробуйте
onClick = {() => this.createSection(project_data.uid)}
Деталь onChange уже правильная.
Эта проблема аналогична существующему ответу на вопрос: Функция React onClick срабатывает при рендеринге
Спасибо за Ваш ответ! Я принял другой ответ, потому что он был первым, но и ваш тоже помог!
Я думал, что мой ответ был первым, хотя позже отредактировал его, чтобы дать больше разъяснений. Но неважно, я рад, что это помогло!
в вашей кнопке вы инициализируете функцию this.createSection(project_data.uid) вместо того, чтобы вызывать ее при необходимости. Самый простой способ - вызвать через стрелочную функцию
onClick = {() => this.createSection(project_data.uid)}
Вместо прямого вызова оберните его в другую функцию, например onClick = {() => this.createSection (project_data.uid)}