I Lernen gerade begonnen reagieren und für diese App ich machen werde, ich benutze Material UI. Aber ich habe Probleme mit Tap-Events. Ich habe Checkboxen hinzugefügt, aber beim Klick werden sie nicht überprüft.Reactjs + Material-ui, Kontrollkästchen funktioniert nicht
Dies ist, wie meine index.js Datei wie folgt aussieht:
import React from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
import { render } from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import App from './components/App';
const theme = {
textField: {
}
}
render((
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
<App />
</MuiThemeProvider>
), document.getElementById('app'));
Teil package.json Datei:
{
"devDependencies": {
"babel-cli": "^6.7.5",
"babel-eslint": "^6.0.2",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.23.1",
"eslint": "^2.7.0",
"eslint-config-airbnb": "^7.0.0",
"eslint-plugin-jsx-a11y": "^0.6.2",
"eslint-plugin-react": "^4.3.0",
"express": "^4.13.4",
"file-loader": "^0.8.5",
"style-loader": "^0.13.1",
"webpack": "^1.12.15",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0"
},
"dependencies": {
"classnames": "^2.2.3",
"material-ui": "^0.15.0-beta.1",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-tap-event-plugin": "^1.0.0"
}
}
Die Navbar.js Datei:
import React from 'react';
import cx from 'classnames';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import Checkbox from 'material-ui/Checkbox';
import styles from '../styles/Navbar.css';
export default function Navbar() {
return (
<nav>
<div className={cx('nav-wrapper', styles.navWrapper)}>
<ul className={cx('left', 'navbarLeft', styles.navbarLeft, 'navbarCanvas')}>
<li>
<Checkbox
label="Snap to grid"
className={cx(styles.checkGrid)}
/>
</li>
</ul>
</div>
</nav>
);
}
Und die App.js Datei:
import React from 'react';
import Navbar from './Navbar';
export default function App() {
return (
<div>
<Navbar />
<h1>React!</h1>
</div>
);
}
Ich habe versucht, diese zwei Tage zu reparieren und ohne Erfolg. Ich habe keine Ahnung was es ist.
Vielen Dank im Voraus!
ich diesen Fehler habe: 'Typeerror: Super-Ausdruck muss entweder null sein oder eine Funktion, nicht undefined' versucht, zu beheben, aber kein Erfolg. Ich werde meine Frage bearbeiten und Paket.json Datei posten, vielleicht wird es helfen. – Plavookac
@Plawookac Versuchen Sie in Ihrem Konstruktor, die Requisiten an die "Super" -Funktion zu übergeben. Wie: Konstruktor (Requisiten) {Super (Requisiten); ....... ' –
@ andré-junges Danke, aber das hat nicht funktioniert, immer noch der selbe Fehler. – Plavookac