javascript - 在 React Component 上检索点击的数组项

Question

我有一个 Search 组件，它将值从数组输出到 ResultItem 子组件，每个子组件都有一个带有 onClick 属性的按钮。我给按钮绑定(bind)了一个函数来获取我点击的数组项的值。

我的工作是，每次我单击每个 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]