javascript - 使用不同的 props React ES6 渲染多个项目

Question

<---------------------编辑------------ -------------->

我希望有一种方法，我只需要一个 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 函数，并且不需要每个复选框的状态。

我想要这个的原因是我想从数据库中获取选中的字段，通过这种方式，人们可以简单地向数据库添加另一个复选框可能性，并且无需更改任何代码即可使其工作。

<小时/>

原始问题

我正在尝试创建一个 Material 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 的属性映射复选框，其中包含 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

不仅将标签传递给 Prop ，还传递回调函数

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