Botones de reversión de la matriz y mapeo en consecuencia en reactJS -- javascript campo con reactjs camp Relacionados El problema

Reversing array and mapping buttons accordingly in ReactJS


0
vote

problema

Español

Estoy ocupado con el tutorial de reacción y me quedé atascado en un punto. Puede alguien, por favor arroje algo de luz en mi caso. Estoy tratando de asignar botones en orden inverso cuando se hace clic en el botón de orden de palanca. Revisé si la condición descendente cambia de falso a verdadero y viceversa. Implementó el método .reverse () con la matriz de historial, pero simplemente no se rinde a la inversa. Ya he probado esta fuente: matriz de mapeo en reversa

  moveOrder() {     this.setState({        descending: !this.state.descending          }); }  render() {     let history = this.state.history;     //alert(history.length);     const current = history[this.state.stepNumber];     const winner = calculateWinner(current.squares);     const location = history[history.length - 1].location;     var descending = false      if(this.state.descending)     {         history = this.state.history.slice().reverse();     }      const moves = history.map((step, move) => {         const desc = move ? 'Go to move #' + move + location[move - 1] : 'Go to game start';           var fontStyle = '';          if(move === this.state.stepNumber){             fontStyle = 'bold';         }else{             fontStyle = 'normal'         }          return (           <li key={move}>             <button style={{fontWeight:fontStyle}} onClick={() => this.jumpTo(move)}>               {desc}             </button>           </li>         );     });   return (       <div className="game">         <div className="game-board">           <Board             squares={current.squares}             onClick={(i) => this.handleClick(i)}           />         </div>         <div className="game-info">           <div>{status}</div>           <ol>{moves}</ol>           <button className="move-order" onClick={() => this.moveOrder()}>           {'Toggle Move Order'}                          </button>         </div>       </div>     );   } }   
Original en ingles

I'm busy with the react tutorial and got stuck at a point. Can someone please shed some light on my case. I'm trying to map buttons in reverse order when the toggle order button is clicked. I checked whether the descending condition changes from false to true and vice versa. Implemented the .reverse() method with the history array, but it just doesn't render in reverse. I've already tried this source : Mapping array in reverse

moveOrder() {     this.setState({        descending: !this.state.descending          }); }  render() {     let history = this.state.history;     //alert(history.length);     const current = history[this.state.stepNumber];     const winner = calculateWinner(current.squares);     const location = history[history.length - 1].location;     var descending = false      if(this.state.descending)     {         history = this.state.history.slice().reverse();     }      const moves = history.map((step, move) => {         const desc = move ? 'Go to move #' + move + location[move - 1] : 'Go to game start';           var fontStyle = '';          if(move === this.state.stepNumber){             fontStyle = 'bold';         }else{             fontStyle = 'normal'         }          return (           <li key={move}>             <button style={{fontWeight:fontStyle}} onClick={() => this.jumpTo(move)}>               {desc}             </button>           </li>         );     });   return (       <div className="game">         <div className="game-board">           <Board             squares={current.squares}             onClick={(i) => this.handleClick(i)}           />         </div>         <div className="game-info">           <div>{status}</div>           <ol>{moves}</ol>           <button className="move-order" onClick={() => this.moveOrder()}>           {'Toggle Move Order'}                          </button>         </div>       </div>     );   } } 
     
       
       

Lista de respuestas


Relacionados problema

0  Cómo enviar un formulario en reaccionar  ( How to submit a form in react ) 
Quiero saber si es posible enviar un formulario que no está en el componente reaccionar por Fetch en el componente de reacción. <form action="json.bc" clas...

2  Configuración de reaccionar StyleGuidist con Siguiente.js y TypeScript  ( Setting up react styleguidist with next js and typescript ) 
Estoy tratando de configurar reaccionar StyleGuidist con Siguiente.js y TypeScript, pero sigo caminando en problemas. My actualyguide.config.js se ve así: ...

0  Reacciona URL de panel compartable  ( React sharable panel url ) 
Considerar mi siguiente fragmento. En este momento, haga clic en el botón, se abre un DIV-THE que carga otro componente. La URL es simplemente ' http: /// loc...

1  ¿Cómo puedo poner un formulario de reactjs-bootstrap y la etiqueta H1 lado a lado  ( How can i put a reactjs bootstrap form and h1 tag side by side ) 
Quiero colocar mi grupo de formulario y mi etiqueta H1 lado a lado horizontalmente. He intentado usar la pantalla: bloque en línea y otras cosas, pero sin sue...

0  Integración de la solicitud de Axios basada en clase al código basado en gancho  ( Integrating class based axios request to the hook based code ) 
¿Cómo puedo integrar esta solicitud de Axios basada en clase al otro código basado en gancho que obtiene datos de un archivo JSON? Básicamente, quiero reempla...

84  Los manipuladores de eventos en reaccionan componentes sin estado  ( Event handlers in react stateless components ) 
Tratando de averiguar una forma óptima de crear manipuladores de eventos en reaccionar componentes sin estado. Podría hacer algo así: const myComponent = (...

1  ¿Cómo agregar a una aplicación de reacción usando Vanilla Javascript?  ( How to append to a react app dom using vanilla javascript ) 
Estoy creando una extensión de cromo que me permite resaltar texto desde cualquier sitio web. solo para darte una idea public String showCourse(Course c)...

0  Haga un bucle para mostrar el objeto de datos de la API en Render usando gráficos reaccsjs  ( Make a for loop to show data object from api in render using charts reactjs ) 
Necesito mostrar algunos datos de la API en el gráfico reaccionar ( https : //canvasjs.com/react-charts/chart-index-data-label/ ) Esta es mi API en frente: ...

0  La función de despacho simulada no se llama  ( Mock dispatch function is not called ) 
Estoy escribiendo una prueba para el creador de acción de ASYNC, pero encontró un problema donde se declara "Función de simulacros esperada para que se haya ...

0  Reaccionar - ¡Niños que acceden a los padres estado demasiado pronto?  ( React children accessing parents state too early ) 
Cuando utilice una devolución de llamada de un niño a App.js, la función de devolución de llamada en App.js establece el estado de un elemento. En la misma fu...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos