单击时显示数组中的最后一个索引（在继续更新的数组中）

Posted 2023-02-14

【中文标题】单击时显示数组中的最后一个索引（在继续更新的数组中）

【英文标题】：Show the last index in an array when I click (in an array that continues to be updated)

【发布时间】：2018-07-20 22:23:07

【问题描述】：

我的应用程序创建快结束了。

银行账户要求您提供密码的第一个字母，然后是第四个等。

我厌倦了依靠自己，所以我创建了这个应用程序。

但是最后一个错误我不知道如何修复。

所以当我按“1”时，我得到“1 - H”，然后当我按“4”时，我想得到：

“1 - H”（之前点击过） “4 - X”（刚刚点击）

但相反，我得到：

“4 - X”（刚刚单击） “4 - X”（刚刚点击）

所以这是由handleResults() 函数在我的Input 组件中的工作方式引起的，但目前我唯一的概念是如何处理这个问题...

import React,  Component  from 'react';
import TextField from 'material-ui/TextField';

import './style.css';

import Buttons from '../Buttons';
import Results from '../Results';

class Input extends Component 
  constructor(props) 
    super(props);
    this.state = 
      password: 'Hh9Xzke2ayzcEUPHuIfS',
      selectedButtons: [],
    ;
    this.handleButtonSelectTwo = this.handleButtonSelectTwo.bind(this);
  

  handleInputChange(pass) 
    this.setState( password: pass );
  

  handleButtonSelectTwo(selected) 
    this.setState(
      selectedButtons: [...this.state.selectedButtons, selected],
    );
  

  handleResults() 
    return this.state.selectedButtons.map(el => (
      <Results key=el appState=this.state />
    ));
  

  render() 
    return (
      <div>
        <div className="Input-textfield">
          <TextField
            hintText="Paste your password here to begin"
            value=this.state.password
            onChange=event => this.handleInputChange(event.target.value)
          />
        </div>
        <div>
          <Buttons
            handleButtonSelectOne=this.handleButtonSelectTwo
            array=this.state.password.length
          />
          this.handleResults()
        </div>
      </div>
    );
  

export default Input;

这里是Results组件代码：

import React,  Component  from 'react';
import _ from 'lodash';

import Avatar from 'material-ui/Avatar';
import List from 'material-ui/List/List';
import ListItem from 'material-ui/List/ListItem';

import './style.css';

const style = 
  avatarList: 
    position: 'relative',
    left: -40,
  ,
  avatarSecond: 
    position: 'relative',
    top: -40,
    left: 40,
  ,
;

class Results extends Component 
  resultsEngine(arg) 
    const  selectedButtons, password  = this.props.appState;
    const passwordArray = password.split('').map(el => el);

    const lastSelectedButton = _.last(selectedButtons);
    const passwordString = passwordArray[_.last(selectedButtons) - 1];

    if (arg === 0) 
      return lastSelectedButton;
    

    if (arg === 1) 
      return passwordString;
    

    return null;
  
  render() 
    if (this.props.appState.selectedButtons.length > 0) 
      return (
        <div className="test">
          <List style=style.avatarList>
            <ListItem
              disabled
              leftAvatar=<Avatar>this.resultsEngine(0)</Avatar>
            />
            <ListItem
              style=style.avatarSecond
              disabled
              leftAvatar=<Avatar>this.resultsEngine(1)</Avatar>
            />
          </List>
        </div>
      );
    
    return <div />;
  


export default Results;

任何人都知道我应该如何更改handleResults() 函数中的代码以实现我的目标？任何解决该问题的帮助将不胜感激。

Buttons组件代码：

import React from 'react';

import OneButton from '../OneButton';

const Buttons = props => 
  const arrayFromInput = props.array;
  const buttonsArray = [];

  for (let i = 1; i <= arrayFromInput; i++) 
    buttonsArray.push(i);
  

  const handleButtonSelectZero = props.handleButtonSelectOne;

  const allButtons = buttonsArray.map(el => (
    <OneButton key=el el=el onClick=handleButtonSelectZero />
  ));

  if (arrayFromInput > 0) 
    return <div>allButtons</div>;
  

  return <div />;
;

export default Buttons;

还有OneButton代码：

import React,  Component  from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = 
  button: 
    margin: 2,
    padding: 0,
    minWidth: 1,
  ,
;

class OneButton extends Component 
  constructor() 
    super();
    this.state =  disabled: false ;
  

  handleClick() 
    this.setState( disabled: !this.state.disabled );
    this.props.onClick(this.props.el);
  

  render() 
    return (
      <RaisedButton
        disabled=this.state.disabled
        key=this.props.el
        label=this.props.el
        style=style.button
        onClick=() => this.handleClick()
      />
    );
  


export default OneButton;

【问题讨论】：

我们将需要查看您的 Buttons 组件，以便能够跟踪进入 handleButtonSelectTwo(selected) 函数的 selected 参数。

【参考方案1】：

在 Results 组件的 resultsEngine 函数中，您指定始终希望使用 _.last(selectedButtons)。这就是它正在做的事情，因此您总是会看到最后一个按钮被点击。你真正想要的是要显示的那个迭代的索引。

const lastSelectedButton = selectedButtons[this.props.index];
const passwordString = passwordArray[selectedButtons[this.props.index]];

要获取索引，您必须创建并传入一个索引，因此当您在 Input 组件的 handleResults 函数中映射选定的按钮时创建它。

handleResults() 
    return this.state.selectedButtons.map((el, index) => (
      <Results key=el appState=this.state index=index />
    ));
  

【讨论】：

非常感谢！它有效，我理解该解决方案！一切都很清楚。完美答案！

很高兴我能帮上忙。我认为您对长度值的索引是一个关闭，单击最后一个按钮会出现空白。但这是一个小问题，我相信你可以处理它。

是的，我只是将其更改为： const passwordString = passwordArray[selectedButtons[this.props.index] - 1];