javascript - ReactJs组件结构-模态内部形式(ReactJs component structure - Form inside modal)

Question

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

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

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.

(填写表单后，单击一个按钮（在modal上 ），它会验证表单数据并通过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

(我在理解孩子/父母之间的关系以及何时适用时遇到了麻烦)

  ask by Alex5207 translate from so

Answer 1

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.

   (按钮组件 （如果只是一个按钮，也可以只是一个按钮）：如果这只是一个按钮，则可以使其在App 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.

(应用程序组件将包含类似于showModal的状态 ，我们需要有一个处理程序来设置此值，并在单击按钮时触发该处理程序。)

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!

(希望能有所帮助！)