[英]Rendering a dynamic input field in React
我在这里有一个测验表格,当用户单击“添加问题”按钮时,我想添加问题的输入字段。
我一直在研究代码,并且能够用一些文本填充状态对象。 显然,目标是使它成为输入组件,然后以某种方式将其呈现到屏幕上。
我正在努力的是如何向页面呈现实际元素。 我知道它是在组件的render方法中完成的,只是不确定如何做到。
我想我越来越近了。 任何帮助,将不胜感激。 代码如下。
谢谢!
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>
);
}
看一个例子 。
如果要渲染<input>
标签,可以使用上面的相同技术,但是请注意,React将其视为受控组件 。
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中映射和渲染动态对象时,最好为每个映射对象插入一个键。 因此,请确保在创建内容时创建该内容。
最好的祝福,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.