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

Question

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

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

我已经足够弄清楚我的组件拆分应该如下：

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

根据道具/状态构建这些组件并放置用于验证数据的功能的正确方法是什么？我在理解孩子/父母关系以及何时适用时遇到困难

Answer 1

成分：

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

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

3. 模态组件：这将保存您的模态，如页眉、正文、页脚
4. 表单组件：这是一个保存表单及其验证的组件。

组件树：

App Component 将包含一个类似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>
    );
  }
}

形式模态：

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;

希望有所帮助！