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传入，其中包含我要执行的操作的逻辑。

对于无状态反应组件来说是全新的

Answer 1

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

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

Answer 2

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

react-distributed-forms

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

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

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

2 个答案: