Структура компонента ReactJs - Форма внутри модальной

Question

Я использую модал, форму и кнопку реакции-начальной загрузки.

Чтобы получить функциональные возможности нажатия кнопки, нужно открыть модал с формой внутри него.После заполнения формы один человек нажимает кнопку (на модальном ), и она проверяет данные формы и отправляет их через REST API.

Я получил достаточно далеко, чтобы понять, что мойРазделение компонента должно быть следующим:

Компонент кнопки, модальный компонент и компонент формы.

Каков будет правильный способ структурировать эти компоненты с точки зрения свойств / состояния и размещенияфункции для проверки данных?У меня проблемы с пониманием отношений между ребенком и родителями и когда это применимо

Answer 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 entry.И форма ||Модальный компонент. является дочерним компонентом.

Таким образом, в модальном компоненте я назвал тот же Form-компонент.

Здесь, в Form-component обработчик типа ввода, кнопка отправки отключена от состояния .. с вводомдлина строки, мы обрабатываем ее проверку.

Я надеюсь, что это сработает для вас.

Answer 2

Компоненты:

1. Компонент приложения: Это будет компонент верхнего уровня

2. Компонент кнопки (Если это просто кнопка, она также может быть просто кнопкой): Если это просто кнопка, вы можете сохранить ее, просто кнопку в App component, если вы хотитеповторно использовать это с некоторым пользовательским элементом, поместите его в компонент.

3. Модальный компонент: Это будет держать ваш модальный как header , body , footer
4. Компонент формы: Это компонент, который будет содержать форму и ее проверки.

Дерево компонентов:

Компонент приложения будет содержать состояние подобно 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;

Надеюсь, что помог!