Я создаю простой компонент в React, который может принимать пользовательский ввод, чтобы затем отобразить его, он отображает форму, поле ввода текста и кнопку.
Проблема в том, что функция handleSubmit никогда не вызывается, даже если я поместил функцию стрелки прямо в onSubmit, чтобы просто предотвратить перезагрузку страницы или просто записать, что кнопка была нажата на консоли, это похоже на он не вызывает свойство onSubmit, но перезагружает страницу.
Я попробовал ответ, указывающий на добавление приведенного ниже кода в конструктор, без изменений, я не уверен, что еще можно попробовать, просто избавившись от формы и используя onClick.
this.handleSubmit = this.handleSubmit.bind(this);
Это мой код:
class ToDoListDisplay extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
render(){
return (
<div>
<h3>Tasks</h3>
<TaskForm />
<div>
</div>
</div>
);
}
}
class InputField extends React.Component{
constructor(props){
super(props);
this.state = {userInputTitle: ''};
}
render(){
return(
<input
type="text"
placeholder="New Task title..."
value={this.state.userInputTitle}
onChange={event => this.setState({userInputTitle: event.target.value})}
/>
);
}
}
class AddButton extends React.Component{
render(){
return(
<button type="submit" >Add</button>
);
}
}
class TaskForm extends React.Component{
constructor(props){
super(props);
this.state = {
tasks: [],
}
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
console.log('Botton pushed');
//this.setState();
}
render(){
return(
<div>
<form
onSubmit={this.handleSubmit}
id="taskForm"
>
<InputField />
<button type="submit">Add</button>
</form>
</div>
)}
}