ReactJS 动态按钮绑定

Question

假设代码（称为 Answers 的子组件）动态生成 3 个 div（基于映射的数据集），每个 div 包含一个文本框和一个提交按钮。

如果用户在第二个文本框中键入内容并单击提交，我如何在 buttonSubmit 处理程序（位于父组件中）中保持正确的绑定（从第二个文本框中获取文本）？

假设我的目标是在 buttonSubmit 处理程序的 alert(comment) 中查看正确的文本......我该如何实现呢？谢谢！

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({
	render: function(){    		
        var self = this;

        var answerNodes = this.props.data.map(function(answer){
			return (
		  <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>
			);
		});

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

Answer 1

我要做的第一件事是将答案标记拆分为一个单独的组件。该组件的职责是呈现单个答案的标记，并在通过提供的处理程序单击提交按钮时提供评论和评级值。使用 refs 获得评论和评分值。

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 呈现一组 Answer 组件，该 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>
        );
    }
});