反应 onclick 将数组中的项目切换到前一个索引

Question

I'm working on this React problem in which I need to shift the index in the array to previous index. For example, I have the list = ["A", "B", "C"] mapped out into

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

And if one person click on "B" in the list, it will be moved up like this

<ul>
<li>B</li>
<li>A</li>
<li>C</li>
</ul>

So here is my attempt that I couldn't get to work from Codepen :

const List = (props) => {
  //   constructor(props) {
  //      super(props);
  //     this.state = {
  //       list: this.props.items
  //     }
  // }
  
  onItemClick = (e) => {
    // console.log("clickedthis", e);
    let currentArr = props.items;
    let current = e;
    let to;
    if(e === 0) {
      to = currentArr.length - 1;
    } else {
      to = e - 1;
    }
    console.log("to", to);
    console.log("array", currentArr);
    let from = currentArr.splice(current, 1)[0];
    // console.log("from", from);
    return props.items.splice(to, 0, from);
    
  }
  
  return  (
    <ul>
    {props.items.map((item, index) => {
      return (
        <li
          key={index} onClick={() => onItemClick(index)}>
          {item}
        </li>
      );
    })}
  </ul>
  )
  
}

document.body.innerHTML = "<div id='root'> </div>";
  
const rootElement = document.getElementById("root");
ReactDOM.render(<List items={["A", "B", "C"]} />, rootElement);

// let listItem = document.querySelectorAll("li")[1];
// if(listItem) {
//   listItem.click();
// }
setTimeout(() => console.log(document.getElementById("root").innerHTML));

I can't use constructor(props) in this code because it won't display the list. I think it's called functional component which takes props as an argument and returns a react element. So how do I get it to work to switch the array on click?

Answer 1

You need to use component's state to display the list because the React will rerender the component only on state change.

You are updating props.items directly and it will not rerender your component, also it's not a good idea to change the props value.

You can use below code:

const List = props => {
  const [items, setItems] = useState(props.items);

  const onItemClick = e => {
    const item = items[e];
    items.splice(e, 1);
    items.unshift(item);
    setItems([...items]);
  };

  return (
    <ul>
      {items.map((item, index) => {
        return (
          <li key={index} onClick={() => onItemClick(index)}>
            {item}
          </li>
        );
      })}
    </ul>
  );
};

Working Demo:

https://codesandbox.io/s/gifted-dawn-gi0el