如何在React材质界面的onChange中传递索引

Question

如何在自动补全的onChange方法中传递index。我可以设置ItemNumber)的状态,如果我硬编码指数为零。但在设定这样的指数时遇到了麻烦。谁能给我指路?

import React from 'react';
import './style.css';
import Autocomplete from '@material-ui/lab/Autocomplete';
export class Item extends Component {
constructor(props) {
super(props);
this.state = {
currentItem: [{
itemNumber: [],
}],
};
}

设置itemNumber状态的工作代码。但是在传递index时遇到问题(而不是currentItem[0]，应该传递index)。像currentItem[我])。

onChangeHandleInput  = (event, value) => {            
let currentItem= [...this.state.currentItem];        
currentItem[0].itemNumber= value;  
this.setState({ currentItem});
}

render() {
const currentItem= Object.values(this.state.currentItem);
return (
<div>
{currentItem.map((element, index) => {
return (
<div className="box">

<Autocomplete
id="itemNumber"
value={element.itemNumber}
options={this.state.Data}
getOptionLabel={option => option}
onChange={this.onChangehandleInput}
//onChange={() => this.onChangeCaptureAutComItemNo(index)}
renderInput={params => (
<TextField {...params} fullWidth />
)}
/>
</div>
);
</div>
)
}
}

Answer 1

对于这种情况，我更喜欢curry无关的参数。下面是一个回调函数，它将索引作为参数，并返回一个回调函数，以便稍后接收onChange事件和值。index在回调范围内关闭。

onChangeHandleInput = index => (event, value) => {            
const currentAsset = [...this.state.currentAsset];        
currentAsset[index].serienr = value;  
this.setState({ currentAsset });
}

用法:

{currentAsset.map((element, index) => {
return (
<div className="box">                             
<Autocomplete
id="itemNumber"
value={element.itemNumber}
options={this.state.Data}
getOptionLabel={option => option}
onChange={this.onChangehandleInput(index)}
renderInput={params => (
<TextField {...params} fullWidth />
)}
/>
</div>
);
})}

如果你想保持回调函数签名简单，你可以更新它以接受3个参数，并将change事件对象和值代理给处理程序。

onChangeHandleInput = (event, value, index) => {            
const currentAsset = [...this.state.currentAsset];        
currentAsset[index].serienr = value;  
this.setState({ currentAsset });
}

用法:

{currentAsset.map((element, index) => {
return (
<div className="box">                             
<Autocomplete
id="itemNumber"
value={element.itemNumber}
options={this.state.Data}
getOptionLabel={option => option}
onChange={(e, val) => this.onChangehandleInput(e, val, index)}
renderInput={params => (
<TextField {...params} fullWidth />
)}
/>
</div>
);
})}

Answer 2

如果你想保持回调函数签名简单，你可以更新它，让它接受3个参数，并将change事件对象和值代理给处理程序。