Как я должен передать входное значение с Redux без использования this.state и setState

Question

Поскольку я изучаю Redux, мне удалось использовать Provider, использовать дочерний компонент, подключить их и т. Д.

Но у меня есть форма в дочернем компоненте, я хочу передать данные от дочернего к родителю, но при Submit.Я не хочу использовать метод 'value onChange setState value'.Я хочу использовать Redux с этим.

Я также могу подумать о выполнении onChange dispatch, но я хочу передать значения, как только onSubmit произойдет.

import React from "react";

class InputComponent extends React.Component {
  addNewTodo = (e) => {
    e.preventDefault()
    console.log(e.target);
  };

  render() {
    return (
      <form onSubmit={this.addNewTodo}>
        <input
          type="text"
          class="form-control form-control-lg addTodoform"
          id='addTodoform'
          placeholder="Add new task or note"
          defaultValue=''
        />
        <button type="submit" class='btn btn-primary' >
          Add
        </button>
      </form>
    );
  }
}

export default InputComponent;

Answer 1

Одним из способов достижения желаемого результата является использование document API для доступа к значению ввода формы addTodoform, например, так:

const inputValue = document.getElementById('addTodoform').value;

Итак, в вашем обработчике addNewTodo(), вы можете сделать следующее:

class InputComponent extends React.Component {
  addNewTodo = (e) => {
    e.preventDefault()
    console.log(e.target);

    // Get value from input directly, without the use of setState, etc
    const inputValue = document.getElementById('addTodoform').value;

    // Dispatch inputValue to your redux action
    // dispatch(submitAction(inputValue))
  };

  render() {
    return (
      <form onSubmit={this.addNewTodo}>
        <input
          type="text"
          class="form-control form-control-lg addTodoform"
          id='addTodoform'
          placeholder="Add new task or note"
          defaultValue=''
        />
        <button type="submit" class='btn btn-primary' >
          Add
        </button>
      </form>
    );
  }
}

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