我希望有一种方法,其中我只需要一个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的道具映射Checkboxes,该道具包含类型为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'))


这可行,但与第一个示例不同,如果我传递道具onCheckchecked,它将应用于每个复选框。但是我希望每个复选框都可以单独控制。

我将如何去做呢?

谢谢你的帮助。

最佳答案

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

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

关于javascript - 使用不同的 Prop 渲染多个项目React ES6,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44862640/

10-09 18:17
查看更多