在React中提交表单时，选择标签并实现数据选择器消失

Question

尝试提交具有许多输入字段和3个选择标记（设置组件）的表单。每当我点击提交时，选择标签就会消失，具体化数据选择器不会显示。

这是表单组件的代码：

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 { 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: '1',
    channel: '1',
    motorReservas: '1',
    idHotel: '',
    statusHotel: '',
    date: ''
  }

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


  handleSubmit = (e) =>{
    e.preventDefault();
    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 onSubmit={this.handleSubmit}>
          <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="submit" value="submit" href="#" className="waves-effect waves-light btn-small btn">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);

如您所见，我将值添加到Form的状态的选择标记中，并将它们和函数handleSetInfo传递给处理选择标记。不幸的是它不起作用

这是“设置组件”组件

import React, { Component } from 'react';

class Setup extends Component {
  render() {

    const { handleSetInfo, pms, channel, motorReservas} = this.props;

    return (
      <div className="Setup">
        <p className="center form-section-title">SETUP</p>
        <div className="section">
          <div className="row">
            <div className="input-field col s4">
              <select id="pms" value={pms} onChange={(e) => handleSetInfo(e)}>
                <option value="" disabled>Escolha</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
              <label>PMS</label>
            </div>
            <div className="input-field col s4">
              <select id="channel" value={channel} onChange={(e) => handleSetInfo(e)}>
                <option value="" disabled>Escolha</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
              <label>Channel</label>
            </div>
            <div className="input-field col s4">
              <select id="motorReservas" value={motorReservas} onChange={(e) => handleSetInfo(e)}>
                <option value="" disabled>Escolha</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
              <label>Motor de Reservas</label>
            </div>
          </div>
        </div>
        <div className="divider"></div>
      </div>
    );
  }
}

export default Setup;

有人知道为什么会这样吗？