0

Есть массив обьектов, есть 4 компонента, один заголовок, и три div'a, функциональные компоненты принимают значения из массива и рендерятся. Рендер отрабатывает, текст есть. Но вот незадача - нужно сделать так, чтобы по нажатию на нужный компонент в заголовке переписывались значения из нажатого div'a, получается считать значения после события onlick, скопировать, передать значения в пропсы заголовка, и переписать. Документацию реакта читал, дельного пока не нашел. Как придумать самописную функцию под эту задачу - ума не приложу. Возможно ли это? Если да, то как?

https://codepen.io/mitrei088/pen/jOxQxJx

const data=[
  {
    name: 'Jon',
    phone: '+380123456789'
  },
  
  {
  name: 'Alice',
  phone: '+380123123123'
  },
  
  {
  name: 'Bob',
  phone: '+380123213543'
  }
]

function Card(props){
  const click=()=>{
    alert('the element was clicked');
  }

  return(
      <div onClick={click} className='SubBlock'>
          <p>{props.name}</p>
          <p>{props.phone}</p>
      </div>
  )
}

function CardHeader(props){
  return(
    <div className='Block'>
        <p>The header component will show the name and phone of clicked component</p>
        <p>{props.name}</p>
        <p>{props.phone}</p>
        {/*console.log(props)*/}
     </div>

  )
}

function App() {
  return (
    <>
        <CardHeader/>
        <div className='Block'>
            {data.map((result,index)=> <Card key={`div number-${index}`} name={result.name} phone={result.phone}></Card>)}
        </div>
        <TestDiv/>
    </>
  );
}

function sayHello(){
  alert('the element is clicked');
}

function TestDiv(){
  return(
      <div onClick={sayHello} className='Block'>
        Test OnClick div
      </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))
2
  • In Russian please :)
    – SwaD
    Commented 10 окт. 2022 в 19:28
  • Доброго времени суток. Есть массив обьектов, есть 4 компонента, один заголовок, и три div'a, функциональные компоненты принимают значения из массива и рендерятся. Рендер отрабатывает, текст есть. Но вот незадача - нужно сделать так, чтобы по нажатию на нужный компонент в заголовке переписывались значения из нажатого div'a, получается считать значения после события onlick, скопировать, передать значения в пропсы заголовка, и переписать. Документацию реакта читал, дельного пока не нашел. Как придумать самописную функцию под эту задачу - ума не приложу. Возможно ли это? Если да, то как? Commented 10 окт. 2022 в 19:32

1 ответ 1

-1

Например вот так:

const data = [
  {
    id: 1, // добавил id, чтобы проще было искать юзеров
    name: "Jon",
    phone: "+380123456789"
  },

  {
    id: 2,
    name: "Alice",
    phone: "+380123123123"
  },

  {
    id: 3,
    name: "Bob",
    phone: "+380123213543"
  }
];

function Card({ user, onSelect }) {
  const handleClick = () => {
    onSelect(user.id);
  };

  return (
    <div onClick={handleClick} className="SubBlock">
      <p>{user.name}</p>
      <p>{user.phone}</p>
    </div>
  );
}

function CardHeader({ users }) {
  
  return (
    <div className="Block">
      <p>
        The header component will show the name and phone of clicked component
      </p>
      {users.length > 0 && users.map((user, index) => ( // принимаем добавленных юзеров и выводим, если массив не пустой
        <div key={`userContainer${index}`}>
          <p>{user.name}</p>
          <p>{user.phone}</p>
        </div>
      ))}
    </div>
  );
}

export default function App() {
  const [users, setUsers] = useState([]);

  const handler = (id) => { // обработчик принимает id юзера, ищет совпадение в data и если такой юзер есть, добавляет в state массив
    const slicedItems = users.slice()
    const foundUser = data.findIndex((item) => item.id === id)
    

    if (foundUser > -1) {
      slicedItems.push(data[foundUser]);
      setUsers(slicedItems);
    }
  };

  return (
    <>
      <CardHeader users={users} />
      <div className="Block">
        {data.map(user => ( // передаем обработчик клика в каждую карточку
          <Card onSelect={handler} key={`div-number-${user.id}`} user={user} />
        ))}
      </div>
      <TestDiv />
    </>
  );
}

function sayHello() {
  alert("the element is clicked");
}

function TestDiv() {
  return (
    <div onClick={sayHello} className="Block">
      Test OnClick div
    </div>
  );
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.