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

Question

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

如果想要点击按钮的功能，应该会打开模态框，里面有一个表单。填写表单后，点击一个按钮(在模态上)，它会验证表单数据并通过 REST API 将其发布。

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

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

根据 props/state 和放置验证数据的函数来构造这些组件的正确方法是什么？我无法理解 child / parent 的关系以及何时适用

Answer 1

组件:

1. App 组件:这将是顶级组件

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

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

组件树:

App 组件将包含一个state，例如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;

希望对您有所帮助!