Reactjs + Material-ui，复选框不起作用

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