Reacjs - 子组件的显示方式

时间:2018-01-22 10:52:29

标签: javascript reactjs

const AnswerGrid = React.createClass({
    getInitialState: function(){
        return {active: null};
    },
    radioClick: function(e){
    this.setState({active: e.target.value});
    },
    render : function(){
        return (
            <li className="answerOption">
                <input type="radio" onChange={this.radioClick} id={this.props.answer.answer_id} className="radioCustomButton" name={this.props.question_id} value={this.props.answer.answer_id}/><br/>
                <label className="radioCustomLabel">{this.props.answer.title}</label>
            </li>   


        );
    }
});

这是我的组件调用AnswerGrid

const QuestionGrid = React.createClass({
    render : function(){
        var rows = [];
        console.log(this.props.active);
        //console.log(this.props.question);
        var question_id = this.props.question.question_id;
        this.props.question.list_answer.map(function(answer){
            rows.push(<AnswerGrid key={answer.answer_id} answer={answer} question_id={question_id} />);
        });
        return (
            <div className="row">
                <div className="col-md-12">
                    <h2 className="question"><b>{this.props.question.question_title}</b></h2>
                    <input type="type" className="rs" name="rs" value={this.props.active} /><br/>
                    <ul className="answerOptions">
                        {rows}
                    </ul>
                    <hr/>
                </div>
            </div>
        );
    }
});

我正在使用QuestionGrid来显示来自AnswerGrid的输入列表li

当我在value={this.props.active}使用QuestionGrid时,它无效。

请帮我修理

0 个答案:

没有答案