2016-04-17 20 views
1

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!

Antwort

0

Sie müssen Handler zur Verfügung zu stellen, so dass der Wert der Checkbox tatsächlich verarbeitet wird. Weitere Informationen finden Sie unter documentation.

Zum Beispiel der folgende Code sollte es beheben (haben es so nicht getestet es könnte ein kleiner Fehler sein):

export default class Navbar extends React.Component { 
    constructor() { 
    super(); 
    this.state = {snapsToGrid: false}; 
    } 
    snapsToGridChecked(event, checked) { 
    this.setState({ 
     snapsToGrid: checked 
    }); 
    } 
    render(){ 
    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)} 
        checked={this.state.snapsToGrid} 
        onCheck={this.snapsToGridChecked.bind(this)} 
       /> 
      </li> 
      </ul> 
     </div> 
     </nav> 
    ); 
    } 
} 
+0

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

+0

@Plawookac Versuchen Sie in Ihrem Konstruktor, die Requisiten an die "Super" -Funktion zu übergeben. Wie: Konstruktor (Requisiten) {Super (Requisiten); ....... ' –

+0

@ andré-junges Danke, aber das hat nicht funktioniert, immer noch der selbe Fehler. – Plavookac

Verwandte Themen