Проблема с использованием вкладок в Materialise CSS для создания формы, управляемой React - PullRequest
Новая
       7

Проблема с использованием вкладок в Materialise CSS для создания формы, управляемой React

0 голосов
/ 03 декабря 2018

Прошло некоторое время с тех пор, как у меня возникла эта проблема, и я не совсем уверен, как ее решить.Я попробовал это 3 разными способами.У всех трех возникла неожиданная проблема, которую я не знаю, как ее решить.

Я использую избыточность, но, на мой взгляд, это не очень актуально.

Цель - создать страницус 3 вкладками каждая с компонентом.Первый будет отображать управляемый компонент формы, второй - табличный компонент с именем staff, а третий в настоящее время пуст.

Существует три подхода, которые я использую:

  1. Я создаю эти вкладки, используя зависимость реакции-материализации.
  2. Я создаю эти вкладки, используя классы материализации, непосредственно импортированные из файла materialize.css.
  3. Создание ТОЛЬКО вкладок с использованием пользовательского интерфейса материала и использование Materialize на других элементах.

Я поделюсь кодом компонента Компонент формы и Компонента PageHotel (родительский элемент формы, персонала иПустой компонент), поскольку именно с ними у меня возникают проблемы:

Это PageHotel Component 

import React, { Component } from 'react';
import Form from './Form';
import Staff from './Staff/Staff';
import SubHeader from '../SubHeader';
import { connect } from 'react-redux';  
//import { Tabs, Paper, Tab} from '@material-ui/core';
import { Tab, Tabs } from 'react-materialize';

class PageHotel extends Component {

state = {
  value: 0,
};

handleTabChange = (event, value) => {
  this.setState({ value });
};

render() {
  const { hotel, tab } = this.props;
  const { value } = this.state;

  return (
    <div className="page">
      <div className="container-custom">
        <SubHeader>
          <p className="p-optionName">{tab}</p>
          {
            hotel.name !== null && (
              <div>
                <p className="hotel-subheader">{hotel.name}</p>
              </div>
            )
          }

       </SubHeader>
    </div>
    <div className="subheader-tabs">
      {/* 
         React-materialize approach 

        <Tabs>
        <Tab title="Informações Gerais" active>
        <div className="divider"></div>
          <Form></Form>
        </Tab>
        <Tab title="Staff">
        <div className="divider"></div>
          <Staff></Staff>
        </Tab>
        <Tab title="Conteúdo">
        <div className="divider"></div>
          <p>Conteúdo</p>
        </Tab>
      </Tabs> */}





      {/*
        ***  Materialize.css Documents ***

      <div class="row">
        <div class="col s12">
          <ul class="tabs">
            <li class="tab col s3"><a href="#test1" active>Informações Gerais</a></li>
            <li class="tab col s3"><a href="#test2">Staff</a></li>
            <li class="tab col s3"><a href="#test3">Conteúdo</a></li>
          </ul>
        </div>
        <div id="test1" class="col s12"><Form></Form></div>
        <div id="test2" class="col s12"><Staff></Staff></div>
        <div id="test3" class="col s12">Conteúdo</div>
    </div>*/}

    {/*

      Material UI approach 

      <Tabs
      value={value}
      onChange={this.handleTabChange}
      indicatorColor="primary"
      textColor="primary"
      scrollable
      scrollButtons="auto"
      >

      <Tab label="Informações Gerais" />
      <Tab label="Staff" />
      <Tab label="Conteúdo" />
    </Tabs>
    {value === 0 && (
    <div>
      <div className="divider"></div>
      <Form></Form>
    </div>
    )}
    {value === 1 && (
    <div>
      <div className="divider"></div>
      <Staff></Staff>
    </div>
    )}
    {value === 2 && <div><div className="divider"></div>Conteúdo</div>} */} 


  </div>
</div>
);
}}

const mapStateToProps = ({ hotel }) => {
  return {
    hotel: hotel
  }
};

export default connect(mapStateToProps)(PageHotel);

Внутри <div className="subheader-tabs"> есть всеразличные подходы, которые я использовал, соответственно прокомментировали, просто раскомментируйте нужный код и протестируйте его, чтобы увидеть результат.Не забудьте также раскомментировать объявление импорта, касающееся конкретной используемой вами платформы.

Это компонент формы 

import React, { Component } from 'react';

import Network from './Form/Network';
import GenInfo from './Form/GenInfo';
import Address from './Form/Address';
import Setup from './Form/Setup';
import $ from "jquery";
import { connect } from 'react-redux';
import { currentHotel } from '../../../redux/actions/hotelAction';
import { Card } from 'react-materialize';

class Form extends Component {

  state = {
    razaoSocial: '',
    nomeFantasia: '',
    cnpj: '',
    noQuartos: '',
    noRecepcao: '',
    cep: '',
    pais: '',
    estado: '',
    cidade: '',
    rua: '',
    numero: '',
    bairro: '',
    complemento: '',
    pms: null,
    channel: null,
    motorReservas: null,
    idHotel: '',
    statusHotel: '',
    date: ''
  }

  handleSetInfo = (e) => {
    console.log(e.target.value);
    this.setState({
        [e.target.id]: e.target.value
    });
  }

  componentDidUpdate(){
    const { currentHotel } = this.props;
    currentHotel(this.state.razaoSocial);
  }

  render() {
    const { razaoSocial, nomeFantasia, cnpj, noQuartos, noRecepcao, cep, pais, estado, cidade, rua, numero, bairro,
      complemento, pms, channel, motorReservas, idHotel, statusHotel, date } = this.state;
    return (

      <Card className="formHotel hoverable">
        <form>
          <Network></Network>
          <GenInfo handleSetInfo={this.handleSetInfo}
            razaoSocial={razaoSocial}
            nomeFantasia={nomeFantasia}
            cnpj={cnpj}
            noQuartos={noQuartos}
            noRecepcao={noRecepcao}
          ></GenInfo>
          <Address handleSetInfo={this.handleSetInfo}
            cep={cep}
            pais={pais}
            estado={estado}
            cidade={cidade}
            rua={rua}
            numero={numero}
            bairro={bairro}
            complemento={complemento}></Address>
          <Setup handleSetInfo={this.handleSetInfo}
            pms={pms}
            channel={channel}
            motorReservas={motorReservas}></Setup>
          <div className="row">
            <div className="col offset-s3 offset-m8 offset-l8 offset-xl9">
              <button type="button" href="#" className="waves-effect waves-light btn-small btn modal-trigger btn-allpoints">Concluir</button>
            </div>
          </div>
        </form>
      </Card>
    );
  }
}


const mapDispatchToProps = (dispatch) => {
  return {
    currentHotel: (hotel) => dispatch(currentHotel(hotel))
  }
}

const mapStateToProps = ({ hotels }) => {
  return {
    hotels
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Form);

Это сетевой компонент, представляющий часть формы 

import React, { Component } from 'react';
import NetworkModal from '../../../modals/NetworkModal';

class Network extends Component {

  state = {
    isPartOf: null
  }

  handleButtonClick = (e) =>{
    console.log(e.target.value);
    e.preventDefault();
    this.setState({
      isPartOf: e.target.value
    });
  }

  render() {

    const { isPartOf } = this.state;

    return (
      <div className="network">
        <p className="center form-section-title">REDE</p>
        <div className="section">
          <p className="network-tab-content">O Hotel faz parte de um grupo hoteleiro?</p>
            <div className="row">
              <div className="col s12 m12 l6">
                <div className="row">
                  <div className="col s12 m12 l6">
                    <button type="button" className="waves-effect waves-light btn-small btn modal-trigger btn-allpoints-clickable" value="yes" onClick={this.handleButtonClick}>Sim</button>
                  </div>
                  <div className="col s12 m12 l6">
                    <button type="button" className="waves-effect waves-light btn-small btn modal-trigger btn-allpoints-clickable" value="no" onClick={this.handleButtonClick}>Não</button>
                  </div>
                </div>
                {
                  isPartOf === 'yes' && (
                    <div className="row">
                      <div className="col s12 m12 l12">
                        <p className="network-tab-content">Qual?</p>
                      </div>
                      <div className="col s12 m12 l12">
                        <button type="button" href="#network-modal" className="waves-effect waves-light btn-small btn modal-trigger btn-allpoints-clickable modal-trigger">Selecione</button>
                      </div>
                  </div>
                  )
                }
              </div>
            </div>
        </div>
        <div className="divider"></div>
        <NetworkModal></NetworkModal>
      </div>
    );
  }
}

export default Network;

Теперь проблемы, с которыми я сталкиваюсь:

  1. При первом подходе (реагировать на материализацию) все работает хорошо во внешнем виде и дизайне, но всякий раз, когда я пытаюсь что-то напечатать на входах, форма обновляется,Это как форма заблокирована.Я ничего не могу напечатать, и мой тег выбора отключен
  2. При втором подходе (materialize.css) все хорошо работает на форме.Я могу напечатать, и состояние, и избыточное хранилище обновляются, НО переключение вкладок не работает, и теги выбора в форме отключены.Только если я перезагружаю страницу, все выглядит идеально
  3. Третий подход (материал пользовательского интерфейса) Все работает хорошо, но внутренний компонент Modal не открывается, если я переключаюсь на другую вкладку и снова переключаюсь на первую.

Я знаю, что это много информации, но я понятия не имею, почему эти проблемы происходят.Если бы я мог решить только один подход, было бы здорово, чтобы я мог вернуться к нормальному развитию.Я застрял с этим.

Спасибо большое !!!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...