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

Question

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

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

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

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

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

Answer 1

成分：

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

2. 按钮组件（如果它只是一个按钮也可以只是一个按钮）：如果这只是一个按钮，你可以保持它在App component只有一个按钮，如果你愿意用一些自定义元素重用它，把它放在一个成分。

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

组件树：

App 组件将包含类似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;

希望有所帮助！

Answer 2

对于基本伪代码

主要组件：

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 入口文件中渲染的基本超级组件。 并形成 || 模态组件。 是子组件。

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

在表单组件输入类型处理程序中，提交按钮从状态中被禁用..输入字符串长度我们正在处理其验证。

我希望这个对你有用。

Answer 3

同样适用于多种弹出表单，或者说SPA具有入门表单弹出和cta onclick反应以及内置在主App组件模板中的“与我们联系”表单。 您还建议使用.NET Core good，Laravel，PHP来为React网站创建api，这是对新手入门的建议。 我使用的大多数api都是php，而且我知道生成器和映射工具对帮助自​​动化api过程的工具提出了建议。 就像.NET MVC中的代码优先方法一样