为什么材料用户界面选项卡停止工作? [英] Why has material-UI Tabs stopped working?
本文介绍了为什么材料用户界面选项卡停止工作?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
材料UI"选项卡已停止工作...它必须在更新后才能使用，因为它现在根本无法使用.这可能是由于我最近对react-tap-event-plugin进行的更新引起的.最初，我认为这是因为我的标签索引，但它也不适用于a，b，c值，例如value='a'，value='b'等
Material UI Tabs has stopped working... It must have been after an update as it's not working at all now. It could have been caused by the recent update to react-tap-event-plugin I made. Initially, I thought it was because of my tab indexing but it doesn't work with the a,b,c values too e.g. value='a', value='b', etc.
我什至尝试过使用剥离的版本作为干净的新组件，例如:
I have even tried it with a stripped out version as a clean new component like so:
//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"
}
}
推荐答案
根据您的最新评论，看来您执行setState的handleChange是罪魁祸首.
Based off of your latest comments it seems like your handleChange that's doing setState is the culprit.
基于material-ui的最新文档，您可以尝试:
Based off of the latest docs for material-ui you could try:
handleChange = (event, value) => {
this.setState({
slideIndex: value,
});
};
看起来您可能正在尝试使用整个event对象而不是值. (您也可以只使用事件，但可能会执行this.setState({slideIndex: event.target.value}).
Looks like you might be trying to use the entire event object instead of the value. (you could also just use the event but do this.setState({slideIndex: event.target.value}) probably.
这篇关于为什么材料用户界面选项卡停止工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
