ReactJs 组件结构 - 模态内的表单

我正在使用react-bootstrap 模态、表单和按钮。

如果需要单击按钮的功能，应该打开其中包含表单的模式。填写完表格后，单击一个按钮（位于modal），它验证表单数据并通过 REST API 发布它。

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

按钮组件、模态组件和表单组件。

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

成分：

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

2. 按钮组件（如果只是一个按钮也可以 只是一个按钮）： 如果这只是一个按钮，您可以保留它，其中只有一个按钮App component，如果您愿意将其与某些自定义元素一起重用，请将其放入组件中。

3. 模态组件：这将保持你的模式就像header,body,footer
4. 表单组件：这是一个将保存表单及其验证的组件。

组件树：

应用程序组件将包含一个state like 显示模态，我们需要有一个处理程序来设置该值，并且当单击按钮时会触发该处理程序。

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;

希望有帮助！