默認 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 定義，上述修改無用