Question

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

<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>

基本上这是一个React Semantic-ui Modal / Dialog。现在我想要做的是使Form可重用（Form组件包含4个输入字段），所以我可以在其他模态或组件中使用它。什么是最好的方式，以便当我点击创建帐户时，它从表单收集数据，然后提交它？

我是否必须将函数传递给Form才能尝试将数据存储在主Modal组件中？或者是否有更好的方法从表单中获取经过验证的数据？

Answer 1

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

您希望在调用Modal的父组件中定义自定义函数。然后将该函数作为prop modal onComplete = {this.submitEmail}

传递给它

然后在你的模态组件中调用handleSubmit中的this.props.onComplete。

然后从这里开始你可以定义你想要使用的自定义函数，并使用onComplete = {whateverFunction}传递它

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

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;

Answer 2

为了使<Form />可重复使用，您需要确定表单的输入/输出是什么，并允许任何潜在的父组件通过props访问/操作它。

也许是这样的：

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

我是否必须将函数传递给Form才能尝试将数据存储在主Modal组件中？或者是否有更好的方法从表单中获取经过验证的数据？

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

我会推荐react-form库，或者，如果你想拥有自己的实现 - 使用redux状态并将输入/表单连接到redux。如果没有redux，则需要在模态中存储输入状态。

Answer 3

无论何时组成组件，都可以使用道具在它们之间共享数据。我将把“名称和标签”道具传递给命名为无状态的功能组件；

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;

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> ); } }

React中可重用的表单字段

3 个答案: