Question

我在这里有一个测验表单，并希望在用户点击＆＃34;添加问题＆＃34;时添加输入字段。按钮。

我一直在玩代码，并且能够用一些文本填充状态对象。显然，目标是让它成为一个输入组件，然后以某种方式将其呈现在屏幕上。

我正在努力解决的问题是如何向页面呈现实际元素。我知道在组件的渲染方法中完成它并不完全确定如何。

我想我已经接近了。任何帮助，将不胜感激。代码如下。

谢谢！

 var QuizForm = React.createClass({
        getInitialState : function() {
            return { questions : [] }
        },
        createQuestion : function() {

        this.state.questions.push("Test");

        // Adds "Test" to state object. 
        this.setState({
            questions : this.state.questions
        });
    },
    render : function() {
        return (
            <div className="quiz-form well text-center">
                <h1 className="header text-center">Quiz Form</h1>
                <ul>
                    {/* Would like question inputs to show up here */}
                </ul>
                <button onClick={this.createQuestion} className="add-question-btn btn btn-primary" style={{ marginTop : 40 }}>Add Question</button>
            </div>    
        );
    }

Answer 1

只需将this.state.questions数组映射到所需的HTML元素即可。

例如，如果要渲染<li>元素：

render : function() {
    return (
        <div className="quiz-form well text-center">
            <h1 className="header text-center">Quiz Form</h1>
            <ul> // magic happens now
                {this.state.questions.map(function(state) {
                   return <li>{state}</li>
                })}
            </ul>
            <button onClick={this.createQuestion} 
               className="add-question-btn btn btn-primary" 
               style={{ marginTop : 40 }}>Add Question</button>
        </div>    
    );
}

请参阅an example。

如果您要呈现<input>代码，可以使用上述相同的技巧，但请注意the fact that React treats it as a controlled component。

Answer 2

React的最佳做法是将state.questions数组映射到动态生成的HTML组件，例如：

    render : function() {
    return (
        <div className="quiz-form well text-center">
            <h1 className="header text-center">Quiz Form</h1>
            <ul> // magic happens now
                {this.state.questions.map(function(state) {
                   return <li key={state.someId}>{state.question}</li>
                })}
            </ul>
            <button onClick={this.createQuestion} 
               className="add-question-btn btn btn-primary" 
               style={{ marginTop : 40 }}>Add Question</button>
        </div>    
    );
}

请记住，在React中映射和渲染动态对象时，最好为每个映射对象插入一个键。因此，请确保在创建内容时创建该内容。

最诚挚的问候，

在React中渲染动态输入字段

2 个答案: