Question

在学习Redux时，我设法使用了Provider，使用了子组件，将它们连接起来等。

但是我在子组件中有表单，我想将数据从子组件传递到父组件，但要提交。我不想使用'value onChange setState value'方法。我想与此一起使用Redux。

我也可以考虑进行onChange调度，但我只想在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>
    );
  }
}

希望这会有所帮助

如何在不使用this.state和setState的情况下通过Redux传递输入值

1 个答案: