在无状态反应组件中让表单提交数据的正确方法是什么？答案

【问题标题】：Whats the proper way to have a form submit data in a stateless react component?在无状态反应组件中让表单提交数据的正确方法是什么？
【发布时间】：2018-12-22 08:16:49
【问题描述】：

我有一个无状态的反应组件，它有点弹出。它从用户那里获取一些数据，并将其传递回它的父级，在那里它执行工作。

让这个组件拥有一个handleSubmit() 函数的最佳方式是什么，该函数接受用户输入并将其发送回父级？

import React, { Component } from "react";
import "../../../node_modules/bulma/css/bulma.css";

const Transfer = (props, token, web3) => {
  return (
    <div className="modal is-active">
      <div className="modal-background" onClick={props.onClick} />
      <div className="modal-card">
        <section className="modal-card-body">
          <div className="content">
            <h1 className="title"> Transfer Tokens </h1>
            <p className="has-text-danger">
              Requires that you are the owner of the token you are transferring
            </p>
            <p className="subtitle">How it works</p>
            <p className="">
              Enter the ID of the token you want to transfer, the address to
              whom its going to, and thats it!
            </p>
            //problem area
            <form onSubmit={props.onClickSubmit}>
              <label htmlFor="text">Address to recieve token</label>
              <input
                name="Address"
                className="input is-info "
                required="true"
              />
              <label htmlFor="number">Token ID</label>
              <input
                className="input is-info"
                name="Token ID"
                type="number"
                required="true"
              />
              <a className="button is-pulled-right">Submit</a>
            </form>
          </div>
        </section>
        <footer className="modal-card-foot is-clearfix">
          <a className="button" onClick={props.onClick}>
            Cancel
          </a>
        </footer>
      </div>
    </div>
  );
};

export default Transfer;

我在父组件中作为道具 onClickSubmit 传入，其中包含我要执行的操作的逻辑。

对无状态反应组件非常陌生

【问题讨论】：

您很可能希望使用有状态组件并将输入值存储在 state 中，并将其用作onClickSubmit prop 函数的参数。
这是我的解决方案，但这是一个非常小的组件，它只是获取几条数据而已。无状态似乎是完美的组件？如果这个组件不能是无状态的，那我觉得我做的无状态组件错了？
您不能在无状态组件中使用 state 或 refs，因此如果不将其转换为有状态组件，您真的没有工具可以完成您想要的事情。如果您的组件仅依赖于给它的 props，那么无状态组件非常适合。但是，如果它们不适合您的用例，那么尝试强制使用无状态组件是没有意义的。
好的。感谢您的反馈。您可以分享的任何资源都涉及到 React 的更深层次和更新方面，而不是基础知识？我掌握了基础知识，但是当尝试深入研究新的/更深入的事物时，很难学习
我个人对文档的Main concepts 和Advanced Guides 部分中列出的技术了解不多。其余的我觉得只是对某些库和 JavaScript 的一般经验。

标签： javascript reactjs react-router

【解决方案1】：

由于您不能在无状态组件中使用refs 或state，因此很难使用无状态组件完成您想要的操作。您可以将无状态组件视为一个纯函数，它根据您给它的props 返回一段 UI。

您可以改为使用有状态组件，例如将输入值存储在state 中，并在用户提交表单时使用此state 调用onClickSubmit 属性函数。

【讨论】：

【解决方案2】：

如果你想构建无状态表单组件，我给你发一个我正在开发的库：

react-distributed-forms

这允许您以这种方式构建您的传输组件，（注意使用 Input 代替 input 和 Button 代替按钮）：

import React, { Component } from "react";
import "../../../node_modules/bulma/css/bulma.css";
import { Input, Button } from "react-distributed-forms";
const Transfer = (props, token, web3) => {
  return (
    <div className="modal is-active">
      <div className="myForm">
        <label htmlFor="text">Address to receive token</label>
        <Input name="Address" className="input is-info " required="true" />
        <label htmlFor="number">Token ID</label>
        <Input
          className="input is-info"
          name="Token ID"
          type="number"
          required="true"
        />
        <Button name="submit" className="button is-pulled-right">
          Cancel
        </Button>
      </div>
    </div>
  );
};

export default Transfer;

然后在您的父组件中，无论它在层次结构中的什么位置，您只需执行以下操作：

<Form onSubmit={({ name }) => { console.log(name); }} onFieldChange={({ name, value} ) => { console.log(name, value); }}>

  ...whatever
  
  <Transfer />
  
  ...whatever

</Form>

onFieldChange 将接收每个输入更改。当你点击按钮时，onSubmit 会收到按钮上的属性“name”。

react-distributed-forms 使用 React 上下文 API，因此您不必直接传递 props，它就可以工作。专为真正动态的表单而构建...

【讨论】：