我有两个地图函数在我的文件中。我希望在每次单击按钮时,将第二个map函数的迭代器变量作为另一个函数的参数传递。这是一个相当新的反应,所以我不知道我应该怎么做才能使它正确
return (
<Table className={classes.table} aria-labelledby="tableTitle">
<EnhancedTableHead />
<TableBody>
{dataList.map((item, item_idx) => {
return (
<TableRow
hover
tabIndex={-1}
key={item.id}
>
<TableCell padding="checkbox">
</TableCell>
<TableCell padding="none">
{item.dataName}--{item.datatId}
</TableCell>
<TableCell padding="none" ><SwitchButton/></TableCell>
<TableCell >
{
this.state.user.map((ab, ab_idx) =>
<li className = "display">
{isSwitchOn === false ? <input type = 'search' placeholder = "id" id="name" name = "name" onChange={(e) => this.handleidChange(e,ab_idx)}/>: " All"}
{isSwitchOn === false ? <a href="javascript:void(0)" className = "removeIcon" style={{display:(this.state.user.length > 1 )? "inline" : "none"}} onClick={() => {this.removeItem(this.state,ab_idx)}} >Remove</a> : "" }
</li>
)}
</TableCell>
<TableCell padding="none">
<Button className="user-edit-btn" style={{display:(isSwitchOn === false) ? "block" : "none", textTransform: 'capitalize',}} variant="contained" onClick={() => {this.insertTextBox(item)}} >
Add User
</Button>
</TableCell>
</TableRow>
);
})}
{(
<TableRow style={{ height: 49 }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
)
每当我单击ADD USER按钮时,我希望"ab“作为函数insertTextBox(item)的参数传递。这样做的时候会给我一个错误:" error :相邻的JSX元素必须被包装在一个封闭的标签中。你想要片段吗?“
发布于 2019-05-29 07:41:44
您需要在构造函数中绑定handleidChange
,如下所示:
this.handleidChange = this.handleidChange.bind(this)
那么你的处理程序应该是这样的:
handleidChange(ab_idx, e){
//do smth
}
然后以这种方式传递处理程序:
<input type = 'search' placeholder = "id" id="name" name = "name"
onChange={this.handleidChange.bind(this, ab_idx)}/>`
https://stackoverflow.com/questions/56351215
复制相似问题