Блог

Главная - Вопросы по программированию - показывать только один элемент, а остальные должны быть сброшены в react js

показывать только один элемент, а остальные должны быть сброшены в react js

#javascript #reactjs

Вопрос:

Попытка показать только один элемент div и сбросить все остальные элементы в массиве с помощью крючка useState.

Я создал начальное состояние в виде логического массива, представляющего значение show (true для отображения и false для скрытия) для каждого элемента. Обработчик события onClick передается каждому элементу, который изменит все значения массива как true и изменит единственный элемент, по которому был сделан щелчок, как false в его индексе. Я прикрепил код ниже. Также props.id содержит индекс/ключ компонента.

Код

 import React,{useState} from "react";
import myComponent from "./Components/myComponents.js";

const Add = (props) =>{
    const [showVals,changeShowVals]=useState([true,true,true,true,true,true,true]);

    const displayHandler=(id)=>{
        const x=id;
        const vals=new Array(7).fill(true);
        vals[x]=!vals[x];
        changeShowVals(vals);
    }
    return(
        <div>
            {showVals[props.id]?
                <myComponent onClick={()=>displayHandler(props.id)}/>:null}
        </div>
    );
}

export default Add;

Комментарии:

1. вам нужно скрыть компонент по щелчку мыши. так ли это ?

2. Если я правильно понимаю, вы хотите показать один из компонентов, который находится в массиве в позиции props.id . Ваш код должен скрывать его, когда вы нажимаете на него, что, похоже, уже делается, и все ранее нажатые элементы будут сброшены до значения true (показано). В вашем заголовке написано «показывать только один элемент, а остальные должны скрываться», в то время как вы говорите о «единственном элементе, на который нажали» в своем вопросе. Чего вы пытаетесь достичь?

3. Да, я хочу показать выбранный компонент и сбросить ранее выбранные элементы.

4. Проблема в этом решении заключается в том, что, когда я нажимаю на первую кнопку показать/скрыть, она показывает правильный компонент, но когда я нажимаю вторую кнопку показать/скрыть, она должна скрыть второй компонент и показать первый компонент, который в данном случае, похоже, этого не делает. @СарунУК

5. Да, я предоставлю вам все прямо сейчас

Ответ №1:

Обновил ответ на основе вашего кода.

Вы не определяете обработчик щелчка для Red компонента.

Мой Компонент:-

 import React from "react";

function MyComponent({ onClick, number }) {
  const style = {
    height: "20px",
    width: "20px",
    backgroundColor: "red",
    margin: "4px",
    cursor: "pointer"
  };

  return (
    <div onClick={() => onClick(number)} style={style}>
      {number}
    </div>
  );
}
export default MyComponent;

Компонент приложения:-

  import React, { useState } from "react";
    import Red from "./red";
    import Green from "./green";
    
    const App = () => {
      const [showVals, changeShowVals] = useState([
        true,
        true,
        true,
        true,
        true,
        true,
        true
      ]);
    
      const displayHandler = (index) => {
        const vals = new Array(7).fill(true);
        vals[index] = !vals[index];
        changeShowVals(vals);
      };
    
      const number = [0, 1, 2, 3, 4, 5, 6];
      return number.map((ele, i) =>
        showVals[i] ? (
          <div onClick={() => displayHandler(ele)}>
            <Red number={ele} key={ele   " red"} />
          </div>
        ) : (
          <Green number={ele} key={ele   " green"} />
        )
      );
    };
    export default App;

Codesandbox — https://codesandbox.io/s/material-demo-forked-8lgc7?file=/App.js:0-684

Комментарии:

1. codesandbox.io/s/material-demo-forked-s1kdo?file=/App.js Я внес некоторые изменения, я хочу щелкнуть по красному компоненту, чтобы он стал зеленым, и если щелкнуть по любому другому красному компоненту, предыдущий зеленый компонент должен стать красным, а щелкнутый компонент должен стать зеленым.

2. Я обновил код — codesandbox.io/s/material-demo-forked-8lgc7?file=/App.js

3. Причина в том, что вы не определяете обработчик щелчка для красного компонента. Обновлен ответ

4. Значит ли это, что я должен сделать дополнительный div для каждого компонента при попытке обработать прослушиватель событий?

5. Ваш компонент должен обработать это —> возврат ><div style={style}>{props.number}<div style={style}></div> — добавьте обработчик щелчка внутри компонента </div> Red

Метки: ,