Динамическое присвоение ref текстовому полю, но оно возвращает последнее значение поля.

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

Причина, вы используете один и тот же ref для всех input элемента, чтобы сделать 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'/>

Проверьте рабочую скрипту: https://jsfiddle.net/0fggkdw3/