使表单在无状态的React组件中提交数据的正确方法是什么？

Question

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

该组件具有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传入，其中包含我要尝试执行的逻辑。

对无状态的React组件非常新

Answer 1

使用无状态组件将很难实现所需的功能，因为您无法在无状态组件中使用refs或state 。 您可以将无状态组件视为一个纯函数，它根据您提供的props返回一个UI。

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

Answer 2

如果您想构建无状态表单组件，则向您发送一个我正在处理的库：

反应分布形式

这允许您以这种方式构建传输组件（注意使用Input代替Input，而使用Button代替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将在按钮上收到属性“名称”。

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