使表單在無狀態的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，它就可以工作。 專為真正的動態表單而建...