[英]How can I display the newly added item on top of the previous item?
How can I display the newly added item on top of the previous item?如何在上一个项目的顶部显示新添加的项目?
<div className="App">
<h2>{this.state.title}</h2>
<form ref="myForm" className="myForm">
<input type="text" ref="input" placeholder="your name" className="formField" />
<button onClick={(e)=>this.fSubmit(e)} className="myButton">submit </button>
</form>
<pre>
{datas.map((data, i) =>
<li reverse key={i} className="myList">
{data.input}
<button onClick={()=>this.fRemove(i)} className="myListButton">remove </button>
<button onClick={()=>this.fEdit(i)} className="myListButton">edit </button>
</li>
)}
</pre>
</div>
<pre>
{datas.map((data, i) =>
<li reverse key={i} className="myList">
{data.input}
<button onClick={()=>this.fRemove(i)} className="myListButton">remove </button>
<button onClick={()=>this.fEdit(i)} className="myListButton">edit </button>
</li>
)}
</pre>
<pre className="reverse-list">
{datas.map((data, i) =>
<li key={i} className="myList">
{data.input}
<button onClick={()=>this.fRemove(i)} className="myListButton">remove </button>
<button onClick={()=>this.fEdit(i)} className="myListButton">edit </button>
</li>
)}
</pre>
.reverse-list{
display:flex;
flex-direction: column-reverse;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.