ReactJs组件结构-模态内部形式 [英] ReactJs component structure - Form inside modal

问题描述

我正在使用react-bootstrap模式，窗体和按钮。

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

需要单击按钮的功能应打开其中带有表单的模式。填写完表单后，单击一个按钮（在 modal 上），它将验证表单数据并通过REST API将其发布。

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

推荐答案

组件：

1. 应用程序组件：这将是顶级组件

按钮组件（如果只是一个按钮也可以是
只是一个按钮）：
如果这只是一个按钮，则可以如果您愿意将其与一些自定义元素一起使用，请将其放在 App组件中只是一个按钮。

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.

组件树：

应用组件将包含状态像 showModal 一样，我们需要有一个处理程序来设置此值，并且单击该按钮时会触发该处理程序。

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

表格模式：

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;

希望有所帮助！

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