ReactJs 组件结构 - 模态内的表单 [英] ReactJs component structure - Form inside modal

问题描述

我正在使用 react-bootstrap Modal、Form 和 Button.

想要点击按钮的功能应该打开带有表单的模式.填写完表单后，点击一个按钮(在modal上)，它会验证表单数据并通过 REST API 发布.

我已经足够了解我的组件拆分应该如下:

一个按钮组件、一个模态组件和一个表单组件.

根据道具/状态构建这些组件并放置用于验证数据的函数的正确方法是什么?我无法理解孩子/父母的关系以及何时适用

解决方案

组件:

1. 应用组件:这将是顶级组件

2. 按钮组件(如果只是一个按钮也可以只是一个按钮):如果这只是一个按钮，您可以保留它在 App 组件 中只有一个按钮，如果您愿意通过一些自定义元素重用它，请将其放置在组件中.

3. Modal 组件: 这将包含您的模态，例如 header、body、footer
4. 表单组件:这是一个保存表单及其验证的组件.

组件树:

App 组件将包含一个 state，如 showModal，我们需要有一个处理程序来设置此值，并且该处理程序会在单击按钮时触发.

从'./FormModal'导入FormModal；类 App 扩展 React.Component {状态 = {显示模式:假}showModalHandler = (事件) =>{this.setState({showModal:true});}hideModalHandler = (事件) =>{this.setState({showModal:false});}使成为() {返回 (<div className="购物清单"><button type="button" onClick={this.showModalHandler}>点击我！</按钮></div><FormModal showModal={this.sate.showModal} hideModalHandler={this.hideModalHandler}></FormModal>);}}

表单模式:

从'./FormContent'导入FormContent；类 FormModal 扩展 React.Component {使成为() {const formContent = <FormContent></FormContent>;常量模态 = this.props.showModal ?<div>{formContent}</div>: 空值;返回 (
{模态}</div>);}}导出默认 FormModal；

希望有所帮助！

I am using the react-bootstrap Modal, Form and Button.

Desiring the functionality of clicking the button should open the modal with a form inside it. After filling out the form, one clicks a button (on the modal) and it validates the form data and posts it through a REST API.

I got far enough to figure out that my component split should be as follows:

A button component, a modal component and a form component.

What would be the correct way to structure these components in terms of props/state and placing the functions for validating the data? I am having trouble in understanding the child/parent relationship and when it's applicable

解决方案

Components:

1. App Component: This is going to be the top level component

2. Button Component (If its just a button can also be just a button): If this is just a button you can keep this has a just a button in App component, if you are willing to reuse this with some custom element place it in a component.

3. Modal component: This is going to hold your modal like header,body,footer
4. Form component: This is a component which will hold the form and its validations.

Component Tree:

App Component will contain a state like showModal, we need to have a handler to set this value and this handler gets triggered when the button is clicked.

import FormModal from './FormModal';   

class App extends React.Component {
   state = {
    showModal : false
  }

  showModalHandler = (event) =>{
    this.setState({showModal:true});
  }

  hideModalHandler = (event) =>{
    this.setState({showModal:false});
  }

  render() {
    return (
      <div className="shopping-list">
        <button type="button" onClick={this.showModalHandler}>Click Me! 
        </button>
      </div>
      <FormModal showModal={this.sate.showModal} hideModalHandler={this.hideModalHandler}></FormModal>
    );
  }
}

Form Modal:

import FormContent from './FormContent';

class FormModal extends React.Component {
  render() {
    const formContent = <FormContent></FormContent>;
    const modal = this.props.showModal ? <div>{formContent}</div> : null;
    return (
      <div>
        {modal}
      </div>
    );
  }
}

export default FormModal;

Hope that helped!

这篇关于ReactJs 组件结构 - 模态内的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！