Javascript React中可重用的表单字段

如果我有以下对话框/模式：

<Modal
                open={this.state.createAccountModalOpen}
                trigger={<Link size="m" theme="bare" href="#" className="main-menu-item" onClick={this.handleOpenModalCreateAccount}>Create account</Link>}
                closeIcon
                onClose={() => { this.setState({
                    createAccountModalOpen: false,
                }); }}
            >
                <Header icon='add user' content='Create account' />
                <Modal.Content>
                    <Form />
                </Modal.Content>
                <Modal.Actions>
                    <Button color='green' onClick={this.handleSubmit}>
                        <Icon name='add user' /> Create account
                    </Button>
                </Modal.Actions>
            </Modal>

{this.setState({
CreateCountModalOpen:false，
}); }}
>
创建帐户

基本上这是一个React语义ui模式/对话框。现在我想做的是使表单可重用（表单组件包含4个输入字段），这样我就可以在其他模块或组件中使用它。当我点击createaccount时，它从表单中收集数据，然后提交数据的最佳方式是什么

---

我是否必须将函数传递给表单以尝试将数据存储在主模态组件中？或者有没有更好的方法从表单中获取已验证的数据？

我正在打电话，所以受到限制

您希望在调用模态的父组件中定义自定义函数。然后将该函数作为prop模态onComplete={this.submitEmail}传递给它

然后在模态组件中，在handleSubmit中调用this.props.onComplete

然后从这里开始，您可以定义要与模型一起使用的自定义函数，并使用onComplete={whateverFunction}传递它

为了只显示所需的输入，可以设置一系列render if语句。然后，当您调用模式时，您可以通过renderIfText={“email”}并在您的模型中通过this.props.renderIfText=email呈现电子邮件输入

import React from 'react';


class ReusableModalForm extends React.Component {
  constructor(props){
    super(props);
    this.state ={
    };
  }



  handleChange(e) {
   let {name, value} = e.target;
   this.setState({
     [name]: value,
     usernameError: name === 'username' && !value ? 'username must have a value' : null,
     emailError: name === 'email' && !value ? 'email must have a value' : null,
     passwordError: name === 'password' && !value ? 'password must have a value' : null,
   });


 }

 handleSubmit(e) {
   e.preventDefault();
   this.props.onComplete(this.state)
 }

  render() {

    return (
     <Modal
       open={this.state.createAccountModalOpen}
       trigger={<Link size="m" theme="bare" href="#" className="main-menu-item" onClick={this.handleSubmit}>{this.props.buttonText}</Link>}
       closeIcon
       onClose={() => { this.setState({
           createAccountModalOpen: false,
       }); }}
   >
       <Header icon='add user' content='Create account' />
       <Modal.Content>
           <Form />
       </Modal.Content>
       <Modal.Actions>
           <Button color='green' onClick={this.handleSubmit}>
               <Icon name='add user' /> {this.props.buttonText}
           </Button>
       </Modal.Actions>
   </Modal>
    );
  }
}



export default ReusableModalForm;

从“React”导入React；
类ReusableModalForm扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
};
}
手变（e）{
设{name，value}=e.target；
这是我的国家({
[名称]：值，
usernameError:name=='username'&&&！value？'username必须有一个值：null，
emailError:name=='email'&&！value？'电子邮件必须有一个值：null，
passwordError:name=='password'&&&！value？'密码必须有一个值：null，
});
}
handleSubmit（e）{
e、 预防默认值（）；
this.props.onComplete（this.state）
}
render（）{
返回(
{this.setState({
CreateCountModalOpen:false，
}); }}
>
{this.props.buttonText}
);
}
}
导出默认可重用ModalForm；

为了使您的

可重用，您需要确定表单的输入/输出内容，并允许任何潜在的父组件通过道具访问/操作表单

也许是这样的：

<CreateAccountForm 
  input1DefaultValue={...} 
  input2DefaultValue={...}
  onSubmit={yourCreateAccountFormHandler}
/>

我是否必须将函数传递给表单以尝试将数据存储在主模态组件中？还是有更好的方法从表单中获取验证数据

这取决于您如何实现表单和输入字段

我建议使用库，或者，如果您想拥有自己的实现——使用redux状态并将输入/表单连接到redux。

---

如果没有redux，则需要将输入的状态存储在模式中。

无论何时编写组件，都需要使用道具在组件之间共享数据。我将把“名称和标签”道具传递给名为的无状态功能组件

input.js

import React from "react";
const Input = ({name,label}) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        autoFocus
        name={name}
        id={name}
        className="form-control"
        aria-describedby="emailHelp"
      />
  );
};
export default Input;

从“React”导入React；
常量输入=（{name，label}）=>{
返回(
{label}
);
};
导出默认输入；

form.js

import React, { Component } from "react";
import Input from "./common/input";
class RegisterForm extends Form {
render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
            <input name="username" label="username" />
            <input name="email" label="email" />
            <input name="password" label="password" /> 
        </form>
      </div> ); } }

import React，{Component}来自“React”；
从“/common/Input”导入输入；
类RegisterForm扩展{
render（）{
返回(
); } }

除了我的按钮在表单之外，它怎么知道handleSubmit？在模态组件handleSubmit（e）{this.props.onComplete（）}内在模态组件handleSubmit（e）{this.props.onComplete（）}内。这是我工作中的一个例子。。。。在您的例子中，authForm只是一个表单，您需要根据需要的输入添加renderif。因此，将您的模态放入组件中，然后在需要模态表单时呈现该组件