我希望有一种方法,其中我只需要一个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'))
这可行,但与第一个示例不同,如果我传递道具
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'))
稍后在复选框生成器中,像这样调用传递的回调。
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/