检索 React 组件上单击的数组项

Question

我有一个 Search 组件，它将数组中的值输出到 ResultItem 子组件，每个子组件都有一个带有 onClick 属性的按钮。我将一个函数绑定到按钮以获取我单击的数组项的值。

我所做的是每次单击每个 ResultItem 按钮时，我都会分别获得 0、1、2、3、4、5、6 的值，这是完美的，但我不需要数组索引，我需要这些值那些索引

class ResultItem extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick
  }

  handleClick(index) {

    // index = this.props.applications[0]
    // index = this.props.applications.map(obj => obj.videoId[0])
    console.log('this click', index)
  }


  render() {
    // console.log ('myProps', this.props.applications[0]);

    const {applications} = this.props;

    return (

      <div>
        {
          applications.map((app, k) => {

            return (
              <Card key={k} style={styles.appCard}>
                <CardMedia style={styles.appMedia}>
                  <div>
                    <Drafts color={white} style={styles.iconer}/>
                  </div>
                </CardMedia>

                <CardTitle key={k} title={app.videoId} subtitle="Application"/>
                 {/* <div key={k}><h3>{app}</h3></div> */}
                <CardText>
                  <div>
                    <div>Status:
                      <b>test</b>
                    </div>
                  </div>
                </CardText>

                <FloatingActionButton
                  style={styles.addButton}
                  backgroundColor={'#CC0000'}
                  onClick={this.handleClick.bind(this, k)}
                >
                  <ContentAdd/>
                </FloatingActionButton>
              </Card>

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

到目前为止我已经尝试过：

如果我使用：

index = this.props.applications[0]

我在我点击的 ALL 按钮上获得数组的第一个值并

如果我使用：

index = this.props.applications.map(obj => obj.videoId[0])

每次单击时，我都会在另一个数组中获取数组中每个项目的第一个字母，有什么方法可以获取我单击的 元素的值，如果可以的话如何?

Answer 1

当您映射数组时，您提供了一个函数，其中第一个参数是当前项目，第二个参数是（该项目的）当前索引。

someArray.map((currentItem, currentIndex) => /* do stuff */ )

如果你只关心item，那么没有必要涉及索引。您可以直接将当前项目传递给handleClick。

render() {

const {applications} = this.props;

return (

  <div>
    {
      applications.map((item) => {

            <FloatingActionButton
              style={styles.addButton}
              backgroundColor={'#CC0000'}
              onClick={ this.handleClick.bind(this, item) }
            >
          </Card>

      )
    })
  }
  </div>
);

handleClick 然后将直接处理项目，而不是索引。如果您仍然想使用索引，也许是因为如果您需要在稍后阶段操作数组，那么索引（第二个参数），我们称之为index，可以像以前一样传递给handleClick ，您将使用该索引来查找相关项目

const clickedItem = this.props.applications[index]

Answer 2

index = this.props.applications[index]

或

index = this.props.applications[index].videoid