React中可重用的表单字段

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模式传递给它onComplete = {this.submitEmail}

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

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

为了只显示您想要的输入，您可以设置一系列render if语句。然后当你调用你的模态你可以通过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组件中？或者是否有更好的方法从表单中获取经过验证的数据？

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

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