Question

材质用户界面标签已停止工作...一定是在更新之后，因为它现在根本不起作用。它可能是由我最近更新的react-tap-event-plugin引起的。最初，我认为这是因为我的标签索引，但它也不适用于a，b，c值，例如value='a'，value='b'等

我甚至尝试使用剥离版本作为一个干净的新组件，如下所示：

//imports
//'use strict';
import * as React from 'react';
import { Button, PrimaryButton, IButtonProps } from 'office-ui-fabric-react';
//import styles from './Npmsharepoint2.module.scss';
//import styles from './AZ.module.scss';
import { IAZProps } from './IAZProps';
import { escape } from '@microsoft/sp-lodash-subset';
var striptags = require('striptags');
//Routing/networking
import {
  SPHttpClient,
  SPHttpClientResponse,
  ISPHttpClientOptions    
} from '@microsoft/sp-http';
import * as ReactDom from 'react-dom';
import { IListItem } from './IListItem';
//Icons
import RaisedButton from 'material-ui/RaisedButton';
import {MdCancel, 
    MdChat, MdCheck, 
    MdAddBox, 
    MdHourglassFull,
    MdDone, MdHome} from 'react-icons/lib/md'
import FaIconPack from 'react-icons/lib/fa'
import TiIconPack from 'react-icons/lib/ti'
import {Tabs, Tab} from 'material-ui/Tabs';

import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} from 'material-ui/Table';
import Image from 'material-ui-image';
//import { storiesOf, action } from '@kadira/storybook';

//Tried this:
// since the export is a function, this is the only actual correct way:
import injectTapEventPluginRequire = require("react-tap-event-plugin");

//And this too!!:
//import * as injectTapEventPluginExport from 'react-tap-event-plugin';
//const injectTapEventPlugin = (injectTapEventPluginExport as any).default;
injectTapEventPluginRequire();


import { IAZRedxFormControllerProps } from './IAZRedxFormControllerProps';
import { IAZRedxFormControllerState } from './IAZRedxFormControllerState';
import AZRedxForm from './AZRedxForm';
import AZRedxList from './AZRedxList';


const data = ['Alexandre', 'Thomas', 'Lucien']
const cardCompstyles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
  slide: {
    padding: 10,
  },
  largeIcon: {
    width: 60,
    height: 60,
  },
};

// From https://github.com/oliviertassinari/react-swipeable-views
import SwipeableViews from 'react-swipeable-views';

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
  slide: {
    padding: 10,
  },
};

export interface CardCompTestState {
    slideIndex: number;
  }

  export interface IAZRedxFormControllerTestProps {
    title: string;
    description: string;
    listName: string;
    //pollService: IPollService;
  }

  export default class AZCardTest extends React.Component<IAZRedxFormControllerTestProps, CardCompTestState> {
    constructor(props: IAZRedxFormControllerTestProps) {
      super(props);
      this.state = {
        slideIndex: 0
      };
    }

  handleChange = (value) => {
    this.setState({
      slideIndex: value,
    });
  };

  render() {
    return (
      <div>
        <Tabs
          onChange={this.handleChange}
          value={this.state.slideIndex}
        >
          <Tab label="Tab One" value={0} />
          <Tab label="Tab Two" value={1} />
          <Tab label="Tab Three" value={2} />
        </Tabs>
        <SwipeableViews
          index={this.state.slideIndex}
          onChangeIndex={this.handleChange}
        >
          <div>
            <h2 style={styles.headline}>Tabs with slide effect</h2>
            Swipe to see the next slide.<br />
          </div>
          <div style={styles.slide}>
            slide n°2
          </div>
          <div style={styles.slide}>
            slide n°3
          </div>
        </SwipeableViews>
      </div>
    );
  }
}

我的版本：

{
  "name": "npmsharepoint",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "browserify -t [ babelify --presets [ react ] ] src/app/scripts/main.js -o src/scripts/app.js",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.1.0",
    "@microsoft/sp-lodash-subset": "~1.1.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0-0",
    "@microsoft/sp-webpart-base": "~1.1.0",
    "@types/jquery": "^2.0.48",
    "@types/jqueryui": "https://registry.npmjs.org/@types/jqueryui/-/jqueryui-1.11.37.tgz",
    "@types/react": "0.14.46",
    "@types/react-addons-shallow-compare": "0.14.17",
    "@types/react-addons-test-utils": "0.14.15",
    "@types/react-addons-update": "0.14.14",
    "@types/react-dom": "0.14.18",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "bootstrap": "^4.0.0-beta.2",
    "browser-router": "^0.2.0",
    "jquery": "^2.2.4",
    "jqueryui": "https://registry.npmjs.org/jqueryui/-/jqueryui-1.11.1.tgz",
    "material-ui-image": "^2.1.1",
    "prop-types": "^15.6.0",
    "react": "15.4.2",
    "react-autosuggest": "^9.3.2",
    "react-bootstrap": "^0.31.5",
    "react-bootstrap-table": "^4.3.1",
    "material-ui": "^0.16.0",
    "react-dom": "15.4.2",
    "react-icons": "^2.2.7",
    "react-responsive-modal": "^2.0.0",
    "react-select": "^1.1.0",
    "react-swipe-card": "^0.1.4",
    "react-swipe-views": "0.0.12",
    "react-swipeable-views": "^0.12.12",
    "reactstrap": "^5.0.0-alpha.4",
    "sp-pnp-js": "^3.0.3"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.1.0",
    "@microsoft/sp-module-interfaces": "~1.1.0",
    "@microsoft/sp-webpart-workbench": "~1.1.0",
    "style-loader": "^0.18.2",
    "css-loader": "^0.28.6",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/material-ui": "^0.20.0",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "@types/react-tap-event-plugin": "0.0.30",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1"
  }
}

Answer 1

根据您的最新评论，似乎您的handleChange正在做setState是罪魁祸首。

根据材料的最新文档-ui，您可以尝试：

handleChange = (event, value) => {
  this.setState({
    slideIndex: value,
  });
};

看起来您可能尝试使用整个event对象而不是值。（您也可以使用该事件，但可能会this.setState({slideIndex: event.target.value})。

为什么Material-UI Tabs停止工作？

1 个答案: