Запретить перезагрузку страницы при отправке формы

Похоже, в вашем constructor вы неправильно привязываете функцию:

this.handleChangeEvent = this.handleChangeEvent.bind(this);
this.handleSubmit = this.handleChangeEvent.bind(this);

Вместо этого вторая функция должна быть связана с handleSubmit

Я думаю, сначала стоит отметить, что без javascript (обычный html) элемент формы отправляется при нажатии на <input type = "submit" value = "submit form"> или <button> также отправляет форму </button>.

В javascript вы можете предотвратить это, используя обработчик событий и вызывая e.preventDefault() при нажатии кнопки или отправке формы. e — это объект события, передаваемый в обработчик события. С помощью react два соответствующих обработчика событий доступны через форму onSubmit, а другой — через кнопку onClick.

<Button color = "primary" onClick = {this.onClickPreventDefault}>onClickPreventDefault</Button>

Пример: http://jsbin.com/vowuley/edit?html, js, консоль, вывод

Изменены области:

1. Конструктор не нужен
2. Реквизит никогда не использовался в штате, теперь просто реквизит
3. Не нужно создавать переменную result
4. Движение к стрелочным функциям сокращает кодовую базу ??
5. Переключите fn() - возьмите из предыдущих реквизитов, это быстрее!
6. Отправьте fn() - активируйте свой реквизит после изменения состояния, так как setState() не является асинхронным

Другие области для улучшения:

1. Вы можете сделать это компонентом без сохранения состояния с помощью useState()

   Надеюсь, это поможет ??

class Todo extends Component {
  state = {
    isEditing: false
  };

  handleRemove = () => {
    this.props.removeTodo(this.props.id);
  };

  toggleEdit = () => {
    this.setState(({ isEditing }) => ({
      isEditing: !isEditing
    }));
  };

  handleChangeEvent = ({ target }) => {
    this.setState({
      [target.name]: target.value
    });
  };

  handleSubmit = e => {
    e.preventDefault();

    this.setState(
      {
        isEditing: false
      },
      () => {
        this.props.updateTodo(this.props.id, this.props.task);
      }
    );
  };

  render() {
    const { task } = this.props;

    return this.state.isEditing ? (
      <div>
        <form onSubmit = {this.handleSubmit}>
          <input
            type = "text"
            name = "task"
            value = {task}
            onChange = {this.handleChangeEvent}
          />
          <button type = "sumbit">Save</button>
        </form>
      </div>
    ) : (
      <div>
        {task}
        <button onClick = {this.handleRemove}>X</button>
        <button onClick = {this.toggleEdit}>E</button>
      </div>
    );
  }
}

export default Todo;