默认 select 选项卡 React.js

Question

嗨，下面的 js 代码表示一个 TabContent，它显示多个选项卡，其中包含一个取决于 tabcontenet 的表格问题是，当组件启动时，即使 activeTab 设置为 1，选项卡也不会自动选择，你能解释一下什么不是在职的？ 因此必须根据其选择自动选择选项卡

React.js 代码：

import {
  Navbar,
  Nav,
  NavItem,
  NavLink,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
  Input,
  Dropdown,
  Collapse,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Badge,
  ButtonGroup,
  Button,
  Form,
  FormGroup,
  TabContent,
  TabPane,
  Row,
  Table,
  UncontrolledButtonDropdown
} from 'reactstrap';
import classnames from 'classnames';
import Widget from '../../../components/Widget';
import s from './Icons.module.scss';

class GestioneFiliale extends React.Component {

  state = {

    activeTab: 1,
    idcliente: '',
    ragionesociale:'',
  };

  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      tableStyles: []
  };
  }

  toggle(tab) {
    if (this.state.activeTab !== tab) {
      this.setState({
        activeTab: tab,
       
      });
    }
  }

  render() {
  
    return (
      <section className={`${s.root} mb-4`}>
        <h1 className="page-title">Gestione Filiali - <span className="fw-semi-bold">Clienti</span></h1>

        <Nav className="bg-transparent" tabs>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '1' })}
              onClick={() => { this.toggle('1'); }}
            >
              <span>Filiali</span>
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '2' })}
              onClick={() => { this.toggle('2'); }}
            >
              <span className="mr-xs">Riferimenti</span>
              <Badge color="primary">Nuovo</Badge>
            </NavLink>
          </NavItem>
          
        </Nav>

        <TabContent activeTab={this.state.activeTab}>
          <TabPane tabId="1">
            <div>
              <h4>Gestione Filiali: <span className="fw-semi-bold"> {this.props.location.state.ragionesociale}</span></h4>
              <Row className="icon-list">
                  <Widget settings close bodyClass={s.mainTableWidget}> <p> </p> <p> </p> <p> </p> <p> </p> <FormGroup> <InputGroup className="input-group-no-border"> <InputGroupAddon addonType="prepend"> <InputGroupText> <i className="fa fa-search text-white" /> </InputGroupText>{' '} </InputGroupAddon>{' '} 
                  <Input id="search-input" className="input-transparent" placeholder="Ricerca" type="text" onChange={this.handleChange} />{' '} 
                  </InputGroup>{' '} </FormGroup>{' '} <Table striped> <thead> <tr className="fs-sm"> <th className="hidden-sm-down"> # </th> <th> Citta </th>{' '} <th> provincia </th> <th className="hidden-sm-down"> Via </th>{' '} <th className="hidden-sm-down"> CAP </th>{' '} <th className="hidden-sm-down"> CAP </th>{' '} <th className="hidden-sm-down"> Edit </th>{' '} </tr>{' '} </thead>{' '}
                   <tbody> {' '} {this.state.tableStyles.map((row) =>(<tr key={row.id}> <td> {row.id} </td>{' '} <td> <img className="img-rounded" src={row.picture} alt="" height="50" /> </td>{' '} <td> {' '} {row.description}{' '} {row.label &&(<div> <Badge color={row.label.colorClass}> {' '} {row.label.text}{' '} </Badge>{' '} </div>)}{' '} </td>{' '} <td> <p className="mb-0"> <small> Città: <span className="text-muted fw-semi-bold">  {row.info.citta}{' '} </span>{' '} </small>{' '} </p>{' '} <p> <small> Provincia: <span className="text-muted fw-semi-bold"> {row.info.provincia}{' '} </span>{' '} </small>{' '} </p>{' '} </td>{' '} <td className="text-muted"> {row.DataInserimento} </td>{' '} <td className="text-muted"> {row.Cap} </td>{' '} <td className="width-150"> <Button color="default" className="mr-2" size="sm" onClick={() => this.getEventEditUser(row.id, row.description, row.Indirizzo, row.info.provincia, row.PartitaIVA, row.CodiceFiscale, row.Titolo, row.FAX, row.PEC, row.Dirittochiamata, row.SDI, row.RimborsoKM, row.info.citta, row.info.cap, row.Telefono, row.Email, row.Nome1, row.Nome2, row.Cellulare1, row.Cellulare2, row.Sconto1, row.Sconto2, row.Sconto3, row.IBAN,row.Applicaprezzorisorsegiornaliero)} > Modifica{' '} </Button> </td>{' '} </tr>))}{' '} </tbody>{' '} </Table>{' '} <div className="clearfix"> <div className="float-right"> <Button color="default" className="mr-2" size="sm"> Refresh... </Button>{' '} <UncontrolledButtonDropdown> <DropdownToggle color="inverse" className="mr-xs" size="sm" caret> Nuovo Cliente{' '}
         </DropdownToggle>{' '} 
         <DropdownMenu> <DropdownItem> Inserisci ragione sociale </DropdownItem>{' '} <Input id="search-input"  name="ragionesociale"  className="input-transparent" placeholder="ragionesociale"  onChange={ this.handleChangetext }  value={ this.state.ragionesociale } type="text"  /> 
        <p></p>
        <div align="center">
        <Button color="success" className="mr-2" size="sm" onClick={this.confirm}> Inserisci </Button>
        </div>
         </DropdownMenu>{' '} </UncontrolledButtonDropdown>{' '} </div>{' '} <p> </p>{' '} </div>{' '} </Widget>{' '}
          
            </Row>
            </div>
          </TabPane>
          <TabPane tabId="2">
            <div>
              <h4>Gestione Riferimenti <span className="fw-semi-bold"> {this.props.location.state.ragionesociale} </span></h4>
              <Row className="icon-list">
              
              </Row>
            </div>
          </TabPane>
        </TabContent>
      </section>
      
    );
  }
}

Answer 1

如我所见，您在构造函数上方和构造函数内部都有 state，因此您的顶部 state 将在构造函数中覆盖，因此在这种情况下this.state.activeTab将无法正常工作，并且标签将无法正常工作。

您可以做的是将顶部 state 放入构造函数中

constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
        activeTab: 1,
        idcliente: '',
        ragionesociale:'',
        tableStyles: []
    };
}

并删除构造函数上方的顶部 state 定义，上述修改无用