Question

＆LT; --------------------- 修改 --------- ---------------＆GT;

我希望有一个方法，我只需要一个onChange函数，但它似乎没有提供任何答案。但是，我错了。感谢Kind user's answer我能够理解这是可能的（虽然不是立即，但从评论中可以看出）。因此，我创建了自己的版本，我已经测试过并且正在使用。

我们有班级CheckboxesField.js

import React from 'react'
import Checkbox from 'material-ui/Checkbox'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

const CheckboxesField = props => {
  const checkboxes = props.allPossibleCheckboxes.map(checkbox =>
    <Checkbox style={{ width: '20%' }}
      checked={props.checked.includes(checkbox)}
      onCheck={props.onCheck}
      key={checkbox}
      label={checkbox}
      id={checkbox}
      iconStyle={{ fill: '#000' }} />)
    return (
      <MuiThemeProvider>
        <div style={{ display: 'flex' }}>
          {checkboxes}
        </div>
      </MuiThemeProvider>
    )
  }

export default CheckboxesField

和班级index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import CheckboxesField from './CheckboxesField'

class Index extends Component {
  constructor() {
    super()
    this.state = {
      checked: ["two", "five"],
      allPossible: ["one", "two", "three", "four", "five"],
    }
    this.onCheck = this.onCheck.bind(this)
  }

  onCheck(e, v) {
    const checked = this.state.checked
    if (v) {
      checked.push(e.target.id)
    } else {
      checked.splice(checked.indexOf(e.target.id), 1)
    }
    this.setState({ checked })
  }

  render() {
    return (
      <div className="index">
        <CheckboxesField
          allPossibleCheckboxes={this.state.allPossible}
          checked={this.state.checked}
          onCheck={this.onCheck}/>
      </div>
    )
  }
}

export default Index
ReactDOM.render(<Index />, document.getElementById('root'))

通过操作2个数组，一个具有所有可能的复选框，一个具有所选值，我们可以使用单个onCheck函数，并且我们不需要每个复选框的状态。

我想要这个的原因是，我想从数据库中获取已检查的字段，并且通过这样做，可以简单地向数据库添加另一个复选框，并且不需要更改代码，以使其工作。

原始问题

我正在尝试创建一个材料字段ui复选框。

我知道我能做到

<div style={{ display: 'flex' }}>
      <Checkbox style={{ width: '20%' }} checked={{ props.checkedOne }} onCheck={{ props.onCheckOne }} key={"one"} label={"one"} iconStyle={{ fill: '#000' }} />
      <Checkbox style={{ width: '20%' }} checked={{ props.checkedTwo }} onCheck={{ props.onCheckTwo }} key={"two"} label={"two"} iconStyle={{ fill: '#000' }} />
      .
      .
      .
</div>

我需要很多复选框。然而，这会令人烦恼并涉及大量的写作。

因此，我有一个CheckboxesFields类，它基于名为labelsList的prop来映射Checkbox，其中包含类型为String的列表

import React from 'react'
import Checkbox from 'material-ui/Checkbox'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

const CheckboxesField = props => {
  const checkboxes = props.labelsList.map(label => <Checkbox style={{ width: '20%' }} key={label} label={label} iconStyle={{ fill: '#000' }} />)
    return (
      <MuiThemeProvider>
        <div style={{ display: 'flex' }}>
          {checkboxes}
        </div>
      </MuiThemeProvider>
    )
  }

export default CheckboxesField

然后在App.js中调用它

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import CheckboxesField from './CheckboxesField'

class App extends Component {
  render() {
    return (
      <div className="App">
        <CheckboxesField labelsList={["1", "2", "3", "4", "5"]} />
      </div>
    )
  }
}

export default App
ReactDOM.render(<App />, document.getElementById('root'))

这有效，但与第一个示例不同，如果我传递道具onCheck和checked，它将适用于每个复选框。但是我希望每个复选框都是单独控制的。

我将如何做到这一点？

感谢您的帮助。

Answer 1

不仅要将标签传递给道具，还要传递回调函数

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import CheckboxesField from './CheckboxesField'

let myfunc1 = () => { console.log("Hello World!") };

let labelsList = [
    {
       onCheck: myfunc1,
       checked: true,
       label: '1',
    },...
];    

class App extends Component {
  render() {
    return (
      <div className="App">
        <CheckboxesField labels={labelsList} />
      </div>
    )
  }
}

export default App
ReactDOM.render(<App />, document.getElementById('root'))

稍后在复选框生成器中调用传递的回调函数。

import React from 'react'
import Checkbox from 'material-ui/Checkbox'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

const CheckboxesField = props => {
  const checkboxes = props.labelsList.map(label => <Checkbox 
                             style={{ 
                                   width: '20%' 
                              }} 
                              key={label.label} 
                              label={label.label}
                              onCheck={label.onCheck}
                              checked={label.checked}
                              iconStyle={{ fill: '#000' }} 
   />);
    return (
      <MuiThemeProvider>
        <div style={{ display: 'flex' }}>
          {checkboxes}
        </div>
      </MuiThemeProvider>
    )
  }

export default CheckboxesField

Answer 2

建议的方法：

<强> app.js

class App extends Component {

  handleCheckbox(event, isChecked, id) {
    console.log(isChecked, id); // will determine which checkbox was changed
                                // and what is it's actual state (checked or not)
  }

  labelList = [1,2,3,4,5]; // rather temporary solution

  render() {
    return (
      <div className="App">
        {this.labelList.map(element => (
          <CheckboxesField 
            key={element} 
            label={element} 
            onChange={this.handleCheckbox} 
          />
        )}
      </div>
    )
  }
}

<强> Checkbox component

export class CheckboxesField extends React.PureComponent {

  handleCheck = (event, isInputChecked) => {
    this.props.onChange(event, isInputChecked, this.props.label);
  };

  render() {
    return (
          <Checkbox
            style={{width: '20%'}}
            label={this.props.label}
            iconStyle={{fill: '#000'}}
            onCheck={this.handleCheck}
          />
    )}
}

Answer 3

正如其他人所建议的那样，您必须提供不仅标签的列表，还要为每个复选框检查状态和相应的onCLick函数，例如：

const cbData = [ {label: "hm", checked: .. , onClick:..}, {label: "hm", checked: .. , onClick} ... ]

标签和检查没有问题，因为实际上每个复选框需要不同的功能，所以onClick更复杂一些。如果你愿意的话，这可以用currying或函数发生器函数来完成。喜欢在：

const onClickGenerator = (checkboxId) => () => console.log("clicked cbox " + checkboxId)

如果你打电话给onClickGenerator("myId")，你会得到一个不带参数的函数，当被调用时，这个函数会显示clicked cbox myId

因此我们可以从cbData生成一系列复选框组件（内部不需要onClick）：

cbData.map((label) => (<Checkbox 
                             style={{ 
                                   width: '20%' 
                              }} 
                              key={label.label} 
                              label={label.label}
                              onCheck={onClickGenerator(label.label)}
                              {...(label.checked ? ({checked:true}) : ({}))}
                              iconStyle={{ fill: '#000' }}

使用不同的道具渲染多个项目React ES6

3 个答案: