Javascript 动态地将ref分配给textarea，但它'；s返回最后一个字段值。

如标题所述， 只有数组的最后一种形式返回值。另一个表单返回为空。 需要帮助了解如何：

addComment(event) {
    event.preventDefault();

    const commentContent = this.refs.commentContent.value;

    console.log(commentContent);
    this.refs.commentContent.value = '';

}

renderArticleList() {
   return (
       this.props.articles.map( (article) => {
          const articleId = article._id;
          return (
             <div key={articleId}>

                <form onSubmit={this.addComment.bind(this)}>
                   <textarea ref="commentContent"/>
                   <button type="submit">Add Comment</button>
                </form>

             </div>
          )
       })
    )
 }

addComment（事件）{
event.preventDefault（）；
const commentContent=this.refs.commentContent.value；
console.log（commentContent）；
this.refs.commentContent.value=''；
}
renderArticleList（）{
返回(
this.props.articles.map（（article）=>{
const articleId=物品.\u id；
返回(
添加注释
)
})
)
}

代码解决方案，以解决问题，非常赞赏。

---

帮助理解和解决问题的链接也很有用。

原因是，您对所有

输入
元素使用相同的
ref
，以使
ref
唯一，将表单索引附加到
ref
，并将该索引传递给
submit
函数，并使用该索引访问输入字段值，试试这个：

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
    }

    addComment(i, event) {
       event.preventDefault();
       let ref = 'commentContent'+i;
       console.log('value', this.refs[ref].value);
    }

    render() {
        return (
          <div>
            {
              this.props.articles.map( (article,i) => {
                  const articleId = article._id;
                  return (
                    <div key={articleId}>

                      <form onSubmit={this.addComment.bind(this,i)}>
                        <textarea ref={"commentContent"+i}/>
                        <button type="submit">Add Comment</button>
                      </form>

                    </div>
                  )
                })
            }
          </div>
        )
    }
}


ReactDOM.render(<App />, document.getElementById('container'));

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
}
添加评论（i，事件）{
event.preventDefault（）；
设ref='commentContent'+i；
console.log（'value'，this.refs[ref].value）；
}
render（）{
返回(
{
this.props.articles.map（（article，i）=>{
const articleId=物品.\u id；
返回(
添加注释
)
})
}
)
}
}
ReactDOM.render（，document.getElementById（'container'））；

检查工作代码：


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
}
添加评论（i，事件）{
event.preventDefault（）；
设ref='commentContent'+i；
console.log（'value'，this.refs[ref].value）；
}
render（）{
返回(
{[1,2,3].map（（article，i）=>{
返回(
添加注释
)
})}
)
}
}
ReactDOM.render（，document.getElementById（'container'））
原因是，您对所有
输入
元素使用相同的
ref
，要使
ref
唯一，请使用
ref
附加表单索引，并将该索引传递给
submit
函数，并使用该索引访问输入字段值，请尝试以下操作：

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
    }

    addComment(i, event) {
       event.preventDefault();
       let ref = 'commentContent'+i;
       console.log('value', this.refs[ref].value);
    }

    render() {
        return (
          <div>
            {
              this.props.articles.map( (article,i) => {
                  const articleId = article._id;
                  return (
                    <div key={articleId}>

                      <form onSubmit={this.addComment.bind(this,i)}>
                        <textarea ref={"commentContent"+i}/>
                        <button type="submit">Add Comment</button>
                      </form>

                    </div>
                  )
                })
            }
          </div>
        )
    }
}


ReactDOM.render(<App />, document.getElementById('container'));

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
}
添加评论（i，事件）{
event.preventDefault（）；
设ref='commentContent'+i；
console.log（'value'，this.refs[ref].value）；
}
render（）{
返回(
{
this.props.articles.map（（article，i）=>{
const articleId=物品.\u id；
返回(
添加注释
)
})
}
)
}
}
ReactDOM.render（，document.getElementById（'container'））；

检查工作代码：


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
}
添加评论（i，事件）{
event.preventDefault（）；
设ref='commentContent'+i；
console.log（'value'，this.refs[ref].value）；
}
render（）{
返回(
{[1,2,3].map（（article，i）=>{
返回(
添加注释
)
})}
)
}
}
ReactDOM.render（，document.getElementById（'container'））

你能澄清你想做什么吗？你想用你的道具的内容填充文本区域吗？你这里的问题是对每个表单使用相同的引用，函数如何知道你在说哪一个。我建议您阅读本页，以获得有关在组件中使用表单的指导。使用state可能更好，也就是说，有一个从任何表单设置的state值，然后onSubmit函数查看该状态值。
ref
的作用域是组件，因此只要使用相同的
ref
名称，就有一个引用。在你的情况下，你的参考文献是相互覆盖的，你只剩下最后一个。你能澄清一下你想做什么吗？你想用你的道具的内容填充文本区域吗？你这里的问题是对每个表单使用相同的引用，函数如何知道你在说哪一个。我建议您阅读本页，以获得有关在组件中使用表单的指导。使用state可能更好，也就是说，有一个从任何表单设置的state值，然后onSubmit函数查看该状态值。
ref
的作用域是组件，因此只要使用相同的
ref
名称，就有一个引用。在您的情况下，您的引用将相互覆盖，只剩下最后一个引用。感谢代码帮助。我用了articleId而不是“I”。我从（文章，I）中删除了“I”。它仍然工作。是的，它会工作，它需要任何唯一的id使ref唯一，但在这种情况下，您需要在提交函数中传递此id，而不是i:）感谢代码帮助。我用了articleId而不是“I”。我从（文章，I）中删除了“I”。它仍然有效。是的，它将有效，它需要任何唯一的id来使ref唯一，但在这种情况下，您需要在提交函数中传递此id，而不是i:）