React Forms-onSubmit не вызывается, пробовали другие решения безрезультатно - PullRequest
0 голосов
/ 25 марта 2020

Я создаю простой компонент в 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>
  )}
}


Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...