如何在自动完成的onChange中传递索引 - React Material UI答案

【问题标题】：How to Pass index in the onChange of autocomplete - React material UI如何在自动完成的onChange中传递索引 - React Material UI
【发布时间】：2021-11-21 19:19:34
【问题描述】：

我们如何在自动完成的 onChange 方法中传递索引。如果我将索引硬编码为零，我可以设置 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 = {
        currentAsset: [{
            itemNumber: [],
        }],

    };
}

设置“itemNumber”状态的工作代码。但是传递索引有问题（而不是 currentAsset[0]，应该传递索引。像 currentAsset[i]）。

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


    render() {
        const currentAsset = Object.values(this.state.currentAsset);

        return (
            <div>
                    {currentAsset.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.onChangeCaptureAutComSerienr(index)}
                            renderInput={params => (
                                <TextField {...params} fullWidth />
                            )}
                            />

                       </div>
                    );
           </div>
        )
    }

}

【问题讨论】：

更改您的 onChangeHandleInput 函数以采用第三个索引参数。然后使用注释的 onChange，唯一的区别是将空函数“（）”更改为：“（事件，值）”并将这些值与索引一起传递给 onChangeHandleInput
也许改变你的 fn 来接受这三个参数，然后...onChange={(event, value) => this.onchangeHandleInput(event, value, index)}

标签： reactjs autocomplete material-ui onchange setstate

【解决方案1】：

对于这种情况，我更喜欢对无关参数进行柯里化。这是将索引作为参数并返回回调函数以稍后获取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 个参数并将更改事件对象和值代理到处理程序。

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>
  );
})}

【讨论】：

完美运行。谢谢。