在 React 中渲染动态输入字段

Posted 2023-02-22

【中文标题】在 React 中渲染动态输入字段

【英文标题】：Rendering a dynamic input field in React

【发布时间】：2016-11-23 23:18:09

【问题描述】：

我在这里有一个测验表格，我想在用户单击“添加问题”按钮时为问题添加输入字段。

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

我正在苦苦挣扎的是如何将实际元素呈现到页面上。我知道它是在组件的渲染方法中完成的，只是不确定如何。

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

谢谢！

 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>    
        );
    

【参考方案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。

【参考方案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 中映射和渲染动态对象时，最好为每个映射对象插入一个键。因此，请确保在创建内容时创建它。

最好的问候，