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

Question

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

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

解决问题的代码解决方案非常感谢。帮助理解和解决问题的链接也很棒。

Answer 1

原因是，您对所有 input 元素使用相同的 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'));

检查工作代码：

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>
  {[1,2,3].map( (article,i) => {
    return (
      <div key={i}>
        <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'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container'/>

检查工作fiddle：https://jsfiddle.net/0fggkdw3/

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

Dynamically assigning the ref to textarea, but it's returning the last field value.

javascript

meteor

reactjs

meteor-react