reactjs - 如何在自动完成的onChange中传递索引 - React material UI

Question

我们如何在自动完成的 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 = {
        currentItem: [{
            itemNumber: [],
        }],

    };
}

用于设置“itemNumber”状态的工作代码。但是在传递索引时遇到问题(而不是 currentItem[0]，应该传递索引。像 currentItem[i])。

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

对于这种情况，我更喜欢柯里化(Currying)无关参数。这是将索引作为参数并返回回调函数以稍后获取 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>
  );
})}