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

Question

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

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

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

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

所以当我按“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;

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