如何在上一個項目的頂部顯示新添加的項目？

Question

如何在上一個項目的頂部顯示新添加的項目？

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

Answer 1

只需更改此代碼

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

CSS

.reverse-list{
  display:flex;
  flex-direction: column-reverse;
}

注意：reverse 屬性僅適用於 Ordered-list ol 標簽，Edge 79 之前的版本不支持 ol 標簽的 reversed 屬性。