我这里有一个测验表单,希望在用户单击“添加问题”按钮时添加问题的输入字段。
我一直在研究代码,并且能够用一些文本填充状态对象。显然,目标是让它成为一个输入组件,然后以某种方式将其渲染到屏幕上。
我正在努力解决的是如何将实际元素渲染到页面。我知道它是在组件的渲染方法中完成的,只是不确定如何完成。
我想我已经很接近了。任何帮助,将不胜感激。代码如下。
谢谢!
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>
);
}
最佳答案
只需映射您的 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 .
关于javascript - 在 React 中渲染动态输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38486016/