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

【问题标题】：ReactJs component structure - Form inside modalReactJs 组件结构 - 模态内的表单
【发布时间】：2019-05-24 02:28:30
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs components

【解决方案1】：

基本伪代码

主要组件：

import Modal from './Modal'
class Super extends React.Component {
    constructor(){
        this.state={
            modalShowToggle: false
        }
    }
    ModalPopUpHandler=()=>{
        this.setState({
            modalShowToggle: !modalShowToggle
        })
    }
    render(){
        return(){
            <div>
                <Button title='ModalOpen' onClick='this.ModalPopUpHandler'> </Button>
                <ModalComponent show={this.state.modalShowToggle}>
            </div>
        }
    }
}

ModalPopUp 组件：

import FormComponent from 'FormComponent'
class ModalComponent extends React.Component {
    constructor(props){
        super(props)
        this.state={
            modalToggle: props.show
        }
    }
    render(){
        if(this.state.modalToggle){
            return(
                <div> 
                    <div className='ModalContainer'>
                        <FormComponent />
                    </div>
                </div>
            )
        } else {
            </div>
        }
    }
}

表单组件：

import Button from './Button'
class FormComponent extends React.Component {
    constructor(){
        this.state={
            submitButtonToggle: true,
            username: ''
        }
    }

    inputHandler=(e)=>{
        if(e){
            this.setState({
                username: e.target.value
            })
        }
    }

    render(){
        return(
            <div>
                <input type='text' value='this.state.username' id='username' onChange='inputHandler' />
                <Button title='Submit' disabled={this.state.username.length > 0}> </Button>
            </div>
        )
    }
}

上面是我们在app/main入口文件中渲染的基本superComponent。和 形式 ||模态组件。 是子组件。

所以在模态组件中我调用了相同的表单组件。

在 Form-component 输入类型处理程序中，提交按钮被禁用状态.. 输入字符串长度我们正在处理它的验证。

我希望它对你有用。

【讨论】：

【解决方案2】：

组件：

应用组件：这将是顶级组件
按钮组件（如果只是一个按钮也可以只是一个按钮）：如果这只是一个按钮，您可以在App component 中保留一个按钮，如果您愿意通过一些自定义元素重用它，请将其放入组件中。
模态组件： 这将包含您的模态，例如 header、body、footer
表单组件：这是一个保存表单及其验证的组件。

组件树：

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;

希望有所帮助！

【讨论】：

这帮助很大 - 谢谢！！我们为什么将 hideModalHandler 作为道具传递给 FormContent 呢？表单不关心模态是否可见吗？
是的，没错，我们在 FormModal 中使用了 hideModalHandler
有意义-表单应该通过单击模态表单提交-我应该如何将表单的函数（handleSubmit）传递给模态的onClick事件？跨度>