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中的代碼優先方法一樣