異なる小道具と複数のアイテムをレンダリングするES6

Question

<に反応--------------------- EDIT ------------ ------------>

私はただ一つのonChange関数しか必要としないメソッドを望んでいましたが、それは答えのようには見えませんでした。しかし、私は間違っていた。 Kind user's answerのおかげで、私はそれが可能であることを理解することができました（あなたはコメントから分かるように、すぐにではありませんが）。それゆえ、私はテストして作業している自分のバージョンを作成しました。

我々は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つの配列、選択した値を持つすべての可能なチェックボックスで1と1を操作することにより、クラス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 

とクラスに持って、我々は、単一の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> 

を行うことができます知っています。しかし、これは迷惑になり、多くの執筆を伴います。したがって

私は、これはその後、

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

このApp.js

で呼び出され 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 

タイプのリストが含まれていlabelsList呼ば小道具、に基づいてチェックボックスをマップCheckboxesFieldsクラスを持っています最初の例とは異なり、小道具onCheckとcheckedを渡すと、すべてのチェックボックスに適用されます。しかし、私は各チェックボックスを個別に制御したい。

どうすればいいですか？

ありがとうございました。

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

後のチェックボックスでの小道具にラベルだけでなく、コールバック関数だけではない

Answer 1

峠は、このような渡されたコールバックを呼び出し発電機。

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の機能をチェックするためのAVE：

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

ラベル、チェックが問題ではありませんあなたが実際に別の機能を必要とするので、onClickのは、もう少し複雑です各チェックボックス。これは、カリングや関数ジェネレータ関数を使用することで実現できます。などに：

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

あなたは引数を取らない機能を取得しますonClickGenerator("myId")呼び出し、呼び出されたときに、この機能は、我々はCBDATAからチェックボックスコンポーネントの配列を生成することができるとclicked cbox myId

だから、武装表示されている場合（これは内部の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' }}