reactjs - 一组循环中的多个回调引用

Question

更新：这是我认为为每个循环设置多个引用的正确方法。如果有另一种方法可以使用回调函数而不是这个，我会添加它。谢谢

class demo2 extends React.Component {

constructor(props) {
    super(props);
    this.elements = ["Alex", "Is", "A", "Psycho"];
    this.inputRefs = [];
}

printName = (key) => {
  alert(this.inputRefs[key].innerText);
}


render() {
    return (
        <div>
            {this.elements.map((v, key) => {
                return (
                    <div>
                        <p ref={ref => (this.inputRefs[key+'-name'] = ref)}>Name 1: {v}</p>
                        <p ref={ref => (this.inputRefs[key+'-name2'] = ref)}>Name 2: {v}</p>
                        <br></br>
                        <button onClick={() => this.printName(key+'-name')}> Alert name 1 </button>
                        <button onClick={() => this.printName(key+'-name2')}> Alert name 2 </button>
                    </div>
                )
            })}
        </div>
    )
}

标签： reactjs