Question

这个问题可能微不足道，但这让我陷于困境。如何获得与onClick元素相同的ID？我的函数调用需要它。（按钮和表单会渲染几次）。

谢谢。

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

整个圈：

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

Answer 1

Mayank提供了快速修复，但是您应该考虑对此进行重新设计。如果为集合中的每个项目返回一个子组件，它将隔离其逻辑，提供视图+组件代码的清晰分隔，并使测试变得更加容易。

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;

从ReactJS中的同一元素获取ID

1 个答案: