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