Reactjs + Material-ui, checkboxes not working

Question

Я только начал изучать React и для этого приложения, которое я делаю, я использую Material-UI. Но у меня проблема с событиями крана. Я добавил флажки, но по клику они не проверяются.

Это как мой index.js выглядит файл как:

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')); 

Часть из package.json файла:

{ 
"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" 
} 
} 

Navbar.js файл:

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> 
); 
} 

И App.js файл:

import React from 'react'; 
import Navbar from './Navbar'; 

export default function App() { 
    return (
    <div> 
     <Navbar /> 
     <h1>React!</h1> 
    </div> 
); 
} 

Я попытался исправить это в течение двух дней и не увенчались успехом. Я понятия не имею, что это.

Заранее благодарен!

Answer 1

Вам нужно будет предоставить обработчики, чтобы действительно значение флажка было обработано. Для получения дополнительной информации см. documentation.

Например, следующий код должен это исправить (не тестировал, так что может быть небольшая ошибка):

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> 
    ); 
    } 
}