Динамическая связка ReactJS

Question

Предположим, что код (дочерний компонент под названием «Ответы») генерирует динамически 3 divs (на основе сопоставленного набора данных), и каждый div содержит текстовое поле и кнопку отправки.

Если пользователь вводит что-то во второе текстовое поле и нажимает кнопку отправки, как мне сохранить надлежащее связывание (захватить текст из второго текстового поля) в обработчике buttonSubmit (находится в родительском компоненте)?

Предположим, что моя цель - увидеть правильный текст в сообщении (комментарий) в buttonSubmit handler ... как я могу это сделать? Благодаря !

var Parent = React.createClass({ 

buttonSubmit: function(e){ 
    e.preventDefault();   

    var comment = $(this).closest('.answer-container').find('.answer-textArea').val(); // get comment text 

    alert(comment); 
}, 
render: function(){ 
    return (
     <div> 
      <Answers data={this.state.answers} onButtonSubmit={this.buttonSubmit} /> 
     </div> 
    ); 
} 
}); 

var Answers = React.createClass({ 
 
\t render: function(){  \t \t 
 
     var self = this; 
 

 
     var answerNodes = this.props.data.map(function(answer){ 
 
\t \t \t return (
 
\t \t <div className="answer-container"> 
 
         <div className="answer-comment"> 
 
          <textarea className="answer-textArea" placeholder="Comment must be more than 5 words ..."></textarea> 
 
         </div> 
 

 
         <div className="answer-rateIt"> 
 
          <input data-id={answer.AnswerID} type="number" className="rating" /> 
 
          <br /><br /> 
 
          <button id={answer.AnswerID} className="buttonSubmit" onClick={self.props.onButtonSubmit} >Submit</button> 
 
         </div> 
 
       </div> 
 
\t \t \t); 
 
\t \t }); 
 

 
\t \t return(
 
\t \t \t <div> 
 
\t \t \t \t {answerNodes} 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
});

Answer 1

Первое, что я бы сделать, это разделить ответ разметку в виде отдельного компонента. Ответственность за этот компонент будет заключаться в том, чтобы сделать разметку для одного ответа и предоставить комментарии и рейтинговые значения, когда кнопка отправки нажата через предоставленный обработчик. Значения комментариев и оценок получены с использованием ссылок.

var Answer = React.createClass({ 
    submitHandler: function (e) { 
     if (this.props.hasOwnProperty('submitHandler')) { 
      this.props.submitHandler({ 
       comment: this.refs.comment.getDOMNode().value, 
       rating: this.refs.rating..getDOMNode().value 
      }); 
     } 
    }, 

    render: function() { 
     return (
      <div className="answer-container"> 
       <div className="answer-comment"> 
        <textarea 
         ref="comment" 
         className="answer-textArea" 
         placeholder="Comment must be more than 5 words ..." 
        ></textarea> 
       </div> 

       <div className="answer-rateIt"> 
        <input 
         ref="rating" 
         type="number" 
         className="rating" 
        /> 
        <br/><br/> 
        <button 
         className="buttonSubmit" 
         onClick={this.submitHandler} 
        > 
         Submit 
        </button> 
       </div> 
      </div> 
     ); 
    } 
}); 

Компонент Answsers сделает группу компонентов Ответа с помощью submitHandler, который крепит AnswerId на данный комментарий и рейтинг, и передает это данные до родителя через предоставленную функцию обработчика.

var Answers = React.createClass({ 
    render: function(){   
     var self = this; 

     var answerNodes = this.props.data.map(function(answer){ 
      var submitHandler = function (answerData) { 
       if (self.props.hasOwnProperty('submitHandler')) { 
        self.props.submitHandler({ 
         answerId: answer.AnswerID, 
         comment: answerData.comment, 
         rating: answerData.rating 
        }); 
       } 
      }; 
      return <Answer id={answer.AnswerID} submitHandler={submitHandler}/>; 
     }); 

     return(
      <div> 
       {answerNodes} 
      </div> 
     ); 
    } 
}); 

Обработчик отправителя родителя может затем получить доступ к данным через данный объект.

var Parent = React.createClass({ 

    buttonSubmit: function(e) { 
     // e.preventDefault(); Not necessary unless inside a form 

     var comment = e.comment; 

     alert(comment); 
    }, 
    render: function(){ 
     return (
      <div> 
       <Answers data={this.state.answers} submitHandler={this.buttonSubmit} /> 
      </div> 
     ); 
    } 
});