Javascript 从ReactJS中的同一元素获取id

这个问题可能很琐碎，但它让我陷入了困境。如何获得与onClick元素相同的id？我的函数调用需要它。 （按钮和窗体渲染多次）

提前谢谢

<button
    id={id}
    onClick={() => this.getUserInput()}
    value="submit"
    className="searchButton"
    >
        <i className="fa fa-search"></i>
</button>

this.getUserInput（）}
value=“提交”
className=“searchButton”
>

整个循环：

for (let i = 0; i < filledArray.length; i++) {
                var spanStyle = {
                    color: this.state.colors[i]
                }
                id++;
                data.push(<div key={i} className="grid-item">
                    <p className="normal">Name: </p>

                    <form className="form" role="search" autoComplete="off">
                        <input id="searchId" className="searchBar" type="search" name="searchField" placeholder={filledArray[i].name}></input>
                        <button id={id} onClick={() => this.getUserInput(id)}  value="submit" className="searchButton"><i className="fa fa-search"></i></button>
                    </form>

                    <p className="normal">Velocity: <span style={spanStyle} className="fatData">{filledArray[i].windspeed}m/s</span></p>
                    <p className="normal">Direction: <span style={spanStyle} className="fatData">{filledArray[i].winddirection}</span></p>
                    <p className="normal">Type: <span style={spanStyle} className="fatData">{filledArray[i].windtype}</span></p>
                    <p className="normal">Temperature: <span style={spanStyle} className="fatData">{filledArray[i].airtemp}°</span></p>
                </div>);
            }
            return (
                data
            );
        }

for（设i=0；i名称：

this.getUserInput（id）}value=“submit”className=“searchButton”>
速度：{filledaray[i]。风速}m/s
方向：{filledArray[i].winddirection}
类型：{filledArray[i].windtype}
温度：{filledArray[i].airtemp}
);
}
返回(
数据
);
}
<马扬克>提供了快速修复，但你应该考虑重新设计。如果为集合中的每个项返回一个子组件，它将隔离其逻辑，提供视图+组件代码的清晰分离，并使测试变得更容易

import React, { Component } from 'react';

class View extends Component {
  constructor(props) {
    super(props);

    this.state = {
      colors: ['#000', '#aaa', '#bbb'],
      items: [{
        airtemp: 5,
        name: 3,
        winddirection: 4,
        windspeed: 1,
        windtype: 2
      },
      {
        airtemp: 1,
        name: 1,
        winddirection: 1,
        windspeed: 1,
        windtype: 1
      }]
    };
  }

  render() {
    // map configs to Section component
    const items = this.state.items.map((item, index) => {
      return <Section key={index} item={item} styles={{ color: this.state.colors[index] }} />;
    });

    return <div>{items}</div>;
  }
}

class Section extends Component {
  constructor(props) {
    super(props);

    this.onClick = this.onClick.bind(this);
  }

  onClick(event) {
    // prevent the form submit
    event.preventDefault();
    // print the button id, input and input id
    console.log(event.target.id, this.input, this.input.id);
  }

  render() {
    const { item, styles } = this.props;
    const { airtemp, name, winddirection, windspeed, windtype } = item;
    // for demo purpose only
    const id = Math.floor(Math.random() * 1000);

    return (
      <div className="grid-item">
        <p className="normal">Name:</p>

        <form className="form" role="search" autoComplete="off">
          <input
            ref={input => {
              this.input = input;
            }}
            className="searchBar"
            type="search"
            name={name}
            placeholder={name} />

          <button id={id} onClick={this.onClick} value="submit" className="searchButton">
            <i className="fa fa-search" />
          </button>
        </form>

        <p className="normal">
          Velocity:
          <span style={styles} className="fatData">
            {windspeed}m/s
          </span>
        </p>
        <p className="normal">
          Direction:
          <span style={styles} className="fatData">
            {winddirection}
          </span>
        </p>
        <p className="normal">
          Type:
          <span style={styles} className="fatData">
            {windtype}
          </span>
        </p>
        <p className="normal">
          Temperature:
          <span style={styles} className="fatData">
            {airtemp}°
          </span>
        </p>
      </div>
    );
  }
}

export default View; 

import React，{Component}来自'React'；
类视图扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
颜色：[“000”、“aaa”、“bbb”]，
项目：[{
气温：5，
姓名:3,，
风向：4，
风速：1，
风型：2
},
{
空气温度：1，
姓名:1,，
风向：1，
风速：1，
风型：1
}]
};
}
render（）{
//将配置映射到节组件
const items=this.state.items.map（（项目，索引）=>{
返回；
});
返回{items}；
}
}
类节扩展组件{
建造师（道具）{
超级（道具）；
this.onClick=this.onClick.bind（this）；
}
onClick（事件）{
//阻止表单提交
event.preventDefault（）；
//打印按钮id、输入和输入id
log（event.target.id，this.input，this.input.id）；
}
render（）{
const{item，styles}=this.props；
const{airtemp，name，winddirection，windspeed，windtype}=item；
//仅供演示之用
const id=Math.floor（Math.random（）*1000）；
返回(
名称：
{
这个输入=输入；
}}
className=“搜索栏”
type=“搜索”
name={name}
占位符={name}/>

速度：
{风速}米/秒


方向：
{风向}


类型：
{windtype}


温度：
{airtemp}°

);
}
}
导出默认视图；
将该id传递给onClick处理程序函数：
onClick={（）=>this.getUserInput（id）}
@MayankShukla，该函数不起作用。因为它在一个循环中，它显然总是返回最后一个数字。但是，dom中的Id是正确的。这应该会起作用，无论如何使用这个
onClick={this.getUserInput.bind（this，Id）}
，它将解决问题：）@MayankShukla非常感谢，这就成功了。虽然你有你的解决方案，但这里有很多错误。您对多个表单使用相同的
searchId
。按ID搜索将返回DOM节点树中的第一项。您使用索引作为
键
，而不是使用类似
风数据{i}
的内容，以便在表单中更加独特。