Question

我正在使用react-bootstrap模式，表单和按钮。

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

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

按钮组件，模式组件和表单组件。

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

Answer 1

组件：

应用程序组件：它将成为顶级组件
按钮组件（如果只是一个按钮，也可以只需一个按钮）：如果这只是一个按钮，则可以保留它在App component中只有一个按钮，如果您愿意将其与某些自定义元素一起使用，则将其放置在组件中。
模态组件：这将保持您的模态，如 header ， body ， footer
表单组件：：该组件将保存表单及其验证。

组件树：

应用程序组件将包含状态，如 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>
        )
    }
}

上面是我们在应用程序/主条目文件中呈现的基本 superComponent 。和 form ||模态组件。是子组件。

因此，在模态组件中，我将其称为相同的Form-component。

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

我希望它对您有用。

ReactJs组件结构-模态内部形式

2 个答案: