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

Question

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

我希望有一种方法，我只需要一个 onChange 函数，但似乎没有提供的任何答案。然而，我错了。感谢Kind user's answer，我能够理解这是可能的（尽管不是立即，正如您从 cmets 中得知的那样）。因此，我创建了自己的版本，我已经对其进行了测试并且正在运行。

我们有课程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 的道具映射复选框，其中包含 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 涉及更多，因为您实际上需要为每个复选框提供不同的功能。这可以通过柯里化或某种函数生成器函数来完成，如果你愿意的话。喜欢在：

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' }}