Reactjs道具未显示。 如何改善我的代码？

Question

// initial state and other properties

    var ReviewControl = React.createClass({
        getInitialState: function() {
            return {
                name:'',
                feedback:'',
                movie:'',
                reviews:[] 
            };
        },
    onChangeName:function(el){
        this.setState({name:el.target.value})
    },

    onChangeFeedback:function(el) {
        this.setState({feedback:el.target.value})
    },

    onChangeMovie:function(el){
        this.setState({agent:el.target.value})
    },

    submitReview:function(el) {

//preventing default for the form

        el.preventDefault();

//storing data into the reviews array created earlier

        this.state.reviews.push(
            {name:this.state.name, feedback:this.state.feedback, movie:this.state.movie});
        this.setState({name:'', feedback:''});
    },

    render: function() {
        var options = this.props.list.map(function(agent){

            return (<option key={agent.id} value={agent.agentName}>{agent.agentName}</option>);
        });

//rendering the form for feedback

        return (

            <div>

//creating form

                <form onSubmit = {this.submitReview}>
                    <lable> Agent Name : </lable>
                    <input type="text" placeholder='Enter The Agent Name' value={this.state.name} onChange={this.onChangeName} />
                    <br/><br/>


                    <lable> Feedback : </lable>
                    <input type="text" placeholder='Enter Your Feedback' value={this.state.feedback} onChange={this.onChangeFeedback} />
                    <br/><br/>

                    <select onChange={this.onChangeMovie}>
                        {options}
                    </select>

                    <br/><br/>

                    <input type="submit" value="Submit"/>

                </form>

//collecting the reviews

                <ReviewCollection reviews = {this.state.reviews} /> 

            </div>
            )
    }


});

// collecting all the reviews from the user and storing it

var ReviewCollection = React.createClass ({

    render:function () {

        var reviews = this.props.reviews.map(function(review) {
            return <Review key={review.id} movie = {review.movie} name = {review.name} feedback = {review.feedback} />
        });

        return (<div> {reviews} </div>)
    }

    });

//showing the stored values from the array review

var Review = React.createClass({
        render:function(){
            return <div>

                <span> Agent Name </span>
                {this.props.name}
                <br/>

                <span> Movie Name </span>
                {this.props.movie}
                <br/>

                <span> Feedback </span>
                {this.props.feedback}
                <br/>
            </div>
        }

});

// rendering the form

var finalReview = <ReviewControl list={agentList} />;
ReactDOM.render(finalReview, document.getElementById('myid'));

Answer 1

You aren't setting the new review state in submitReview . Just pushing into the old array isn't actually updating state. You have to explicitly update it.

this.state.reviews.push({
  name: this.state.name,
  feedback: this.state.feedback,
  movie: this.state.movie
});

this.setState({
  name: '',
  feedback: '',
  reviews: this.state.reviews
});

Another small thing I noticed is that you're using el as the argument for events. Typically it's just e or event . el is usually short for element, usually a dom node.