Question

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

我的工作是每次单击每个ResultItem按钮时，我得到的值分别为0,1,2,3,4,5,6，这是完美的，但我不需要数组索引，我需要值那些索引

head

到目前为止我尝试过：

如果我使用：

runner

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

如果我使用：

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

每次点击都会得到另一个数组中每个数组项目的第一个字母，有没有什么方法可以获得我点击的元素值，如果有的话？

Answer 1

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

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

如果您只关心该项目，则无需涉及索引。您可以直接将当前项目传递给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，可以传递给{{1和以前一样，你可以使用那个索引用

找到相关的项目

handleClick

Answer 2

index = this.props.applications[index]

或

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

在React Component上检索单击的数组项

2 个答案: