通过onclick和ReactJs对列表项重新排序_Reactjs

通过onclick和ReactJs对列表项重新排序

reactjs

通过onclick和ReactJs对列表项重新排序,reactjs,Reactjs,学习ReactJs，我会使用最佳实践来实现这一点。请任何人在您的解决方案中添加其他功能或评论。我试图通过单击一组向上/向下按钮来构建一个重新排序列表项组件 1）如何显示所有道具组件值和颜色 2）为了处理事件，我应该使用构造函数和add-onClickUp（）和onClickDown（）方法结果列表组件： class FruitList extends Component { constructor(props) { super(props); this.s

学习ReactJs，我会使用最佳实践来实现这一点。请任何人在您的解决方案中添加其他功能或评论。

我试图通过单击一组向上/向下按钮来构建一个重新排序列表项组件

1）如何显示所有道具组件值和颜色

2）为了处理事件，我应该使用构造函数和add-onClickUp（）和onClickDown（）方法

结果列表组件：

class FruitList extends Component {

   constructor(props) {
      super(props);
      this.state = { // set new state for bind key items
         items : [
           {'id': 1, 'name': 'orange', 'bgColor': '#f9cb9c'},
           {'id': 2, 'name': 'lemon','bgColor' : '#fee599'},
           {'id': 3, 'name': 'strawberry', 'bgColor': '#e06666'},
           {'id': 4, 'name': 'apple', 'bgColor' : '#b6d7a7'}
         ]
      }
   }

   onMoveUp = (key) => {
      if(key === 0) return; // disable method when the key its equal to 0 
      const { items } = this.props; // assign props to items for don't repeat my self 
      const index = key - 1;  // save in memory index value less than one
      const itemAbove = items[index]; // save in memory items index  
      items[key - 1] = items[key]; // match id value with the key object
      items[key] = itemAbove; 
      this.setState({ items }); // set new state 
   }

   onMoveDown = (key) => {
      const { items } = this.props;
      if(key === items.length - 1) return;
      const index = key + 1;
      const itemBelow = items[index];
      items[key + 1] = items[key];
      items[key] = itemBelow;
      this.setState({ items });
   }

   render() {
      const { items } = this.state;

      return (
         <ul>
           {items.map((item, key) =>
               <li key={key} style={{ backgroundColor: item.bgColor }}>
                  <div className="fruitsId">{ key + 1 }</div>
                  <div className="fruitsName">{ item.name }</div>
                  <div className="fruitsArrows">
                     <span onClick={() => this.onMoveUp(key)}>&#x25B2;</span>
                     <span onClick={() => this.onMoveDown(key)}>&#x25BC;</span>
                  </div>
               </li>
            )}
         </ul>
      );
   }

}

类水果列表扩展组件{
建造师（道具）{
超级（道具）；
this.state={//为绑定键项设置新状态
项目：[
{'id'：1，'name'：'orange'，'bgColor'：'#f9cb9c'}，
{'id'：2，'name'：'lemon'，'bgColor'：'fee599'}，
{'id'：3，'name'：'草莓'，'bgColor'：'#e06666'}，
{'id'：4，'name'：'apple'，'bgColor'：'b6d7a7'}
]
}
}
onMoveUp=（键）=>{
if（key==0）return；//当key等于0时禁用方法
const{items}=this.props；//为“不要重复我自己”的项目分配props
const index=key-1；//保存在内存中的索引值小于1
const itemOver=items[index]；//保存在内存中的项索引
items[key-1]=items[key]；//将id值与key对象匹配
项目[关键]=上述项目；
this.setState（{items}）；//设置新状态
}
onMoveDown=（键）=>{
const{items}=this.props；
if（key==items.length-1）返回；
常数索引=键+1；
const itemLower=项目[索引]；
项目[关键点+1]=项目[关键点]；
项目[关键]=以下项目；
this.setState（{items}）；
}
render（）{
const{items}=this.state；
返回(

{items.map（（item，key）=>

{key+1}
{item.name}
这个.onMoveUp（key）}>&x25B2；
这个.onMoveDown（key）}>&x25BC；

)}

);
}
}

App.js组件：

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         fruitList : [
           {'id': 1, 'name': 'orange', 'bgColor': '#f9cb9c'},
           {'id': 2, 'name': 'lemon','bgColor' : '#fee599'},
           {'id': 3, 'name': 'strawberry', 'bgColor': '#e06666'},
           {'id': 4, 'name': 'apple', 'bgColor' : '#b6d7a7'}
         ]         
      }
   }

   render() {
      return (
         <FruitList items={this.state.fruitList} />
      );
   }

}

ReactDOM.render(<App />, document.body);

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
成果清单：[
{'id'：1，'name'：'orange'，'bgColor'：'#f9cb9c'}，
{'id'：2，'name'：'lemon'，'bgColor'：'fee599'}，
{'id'：3，'name'：'草莓'，'bgColor'：'#e06666'}，
{'id'：4，'name'：'apple'，'bgColor'：'b6d7a7'}
]         
}
}
render（）{
返回(
);
}
}
ReactDOM.render（
是的，您应该并提供回调onMoveUp/onMoveDown
并将它们传递给结果列表
，或者您可以有一个onMove（id:number，direction:number）
并传递到那里+1
（枚举向下）或-1
（枚举向上）以向右移动。请参阅下面的代码
此外，如果您愿意，下面代码中的方法handleMove
也可以移动到FruitList
类中，并将其命名为例如handleListChanged
，因此App
每次更改都只会收到新的列表。我想我的代码更适合您，因为您从React开始

const UP=-1
常数向下=1
类水果列表扩展了React.Component{
render（）{
const{fruitList，onMove}=this.props
返回(

{FROUTLIST.map（（项目）=>

{item.id}
{item.name}
onMove（item.id，UP）}>&x25B2；
onMove（item.id，DOWN）>&x25BC；

)}

);
}
}
类应用程序扩展了React.Component{
state={//为绑定键项设置新状态
项目：[
{'id'：1，'name'：'orange'，'bgColor'：'#f9cb9c'}，
{'id'：2，'name'：'lemon'，'bgColor'：'fee599'}，
{'id'：3，'name'：'草莓'，'bgColor'：'#e06666'}，
{'id'：4，'name'：'apple'，'bgColor'：'b6d7a7'}，
]
}
手柄移动=（id，方向）=>{
const{items}=this.state
const position=items.findIndex（（i）=>i.id==id）
如果（位置<0）{
抛出新错误（“未找到给定项”）
}else if（方向===向上和位置===0 | |方向===向下和位置===items.length-1）{
return//不能移出数组
}
const item=items[position]//保存项目以备以后使用
const newItems=items.filter（（i）=>i.id！==id）//从数组中删除项
新项目.拼接（位置+方向，0，项目）
this.setState（{items:newItems}）
}
render（）{
返回(
)
}
}
ReactDOM.render(
,
文件正文
)；
/*在此处添加您的css样式*/
身体{
字体系列：Arial、Helvetica、无衬线字体；
}
保险商实验室{
列表样式：无；
填充：0；
}
李{
保证金：0自动；
文本对齐：居中；
宽度：400px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
李迪夫{
边框：1px纯白；
填充：5px0；
}
弗鲁西德先生，
.果园{
宽度：50px；
}
.水果卷{
宽度：300px；
}
您遇到了几个问题。首先，您需要映射水果列表中项目的属性，并且bgColor的变量需要一致。请参阅下面的功能示例，至少让您开始使用功能组件：

类水果列表扩展了React.Component{
render（）{
返回(

{this.props.items.map（（项，键）=>

{item.id}
{item.name}
▲；
▼；