动态生成的输入字段 - 如何访问值

Question

我正在用 reactjs 开发一个水疗中心。

我的一个组件映射到一个数组，并生成包含输入框的子组件，如下所示：

  <div>
       <textarea placeholder="Please add a response here." id={review._id} 
                        type="text" className={style.responseBox}/><br/>
       <button  onClick={this.submitResponse} className= 
                       {style.responseButton}>Submit your response</button>
 </div>

如何让“submitResponse”事件处理程序访问字段 id={review._id} 的值？

我想要这样的东西：

（其中'id'是输入元素的id）

submitResponse(event, id){
console.log('user submitted value at input field id", id);
console.log('the value entered by the user at that field is', this.event.id.target.value);
}

由于组件是动态生成这些输入字段的，所以我不能在状态中提前声明它们，否则我会制作这些受控输入字段。

谢谢！

Answer 1

你可以这样做。

        <button
            onClick={(event) => {
                this.submitResponse(event, review._id);
            }}
            className={style.responseButton}
        >
            Submit your response
        </button>