Question

距离我遇到这个问题已经有一段时间了，我不确定如何解决。我尝试了3种不同的方式。三个人都有一个我不知道如何解决的意外问题。

我正在使用redux，但是我认为这并不重要。

目标是创建一个包含3个选项卡的页面，每个选项卡均包含一个组件。第一个将显示一个受控的表单组件，第二个将显示一个称为staff的表组件，第三个当前为空。

我正在使用三种方法：

我正在使用react-materialize依赖关系创建这些选项卡。
我正在使用直接导入的物化类创建这些选项卡来自materialize.css文件。
仅使用物料界面创建选项卡，并在其他元素上使用Materialize。

我将共享表单组件和PageHotel组件（表单，工作人员和空组件的父对象）的代码，因为它们是我遇到的问题：

这是PageHotel组件

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;

现在我面临的问题是：

在第一种方法（反应实现）上，一切在外观和设计上均正常运行，但是每当我尝试在输入中键入任何内容时，都会刷新表单。就像表单被阻止一样。我无法输入任何内容，并且我的选择标记已禁用
第二种方法（materialize.css）在表单上一切正常。我可以键入，状态和redux存储都将更新，但是选项卡切换不起作用，并且表单上的选择标签被禁用。只有当我重新加载页面时，一切看起来才是完美的
第三种方法（材料ui）一切正常，但是如果我切换到另一个选项卡并再次切换回第一个选项卡，则Modal内部组件不会打开。

我知道这里有很多信息，但是我不知道为什么这些问题正在发生。如果我只能解决一种方法，那就太好了，这样我就可以恢复正常的开发。我对此感到困惑。

非常感谢您！

在Materialize CSS中使用制表符来创建React控制表单的问题

0 个答案: