как объединить выбранные опции в реагировать на выбор - PullRequest
Новая
       14

как объединить выбранные опции в реагировать на выбор

2 голосов
/ 11 апреля 2020

Я использую реагирующее выделение, и я новичок. У меня есть компонент с именем Example 

const colourOptions = [
  { value: '1', label: '1', color: '#00B8D9' },
  { value: '2', label: '2', color: '#0052CC' },
  { value: '3', label: '3', color: '#5243AA' },
];

class Example extends React.Component {
      state = {
        selectedOption: null,
      }

      render() {
        const { selectedOption, onHandleChange } = this.props;
        return (

          <Select
            onChange={onHandleChange}
            options={colourOptions}
          />

        );
      }
    }

    export default Example;

В другом файле у нас есть функциональный Компонент 

export default function UserProfile() {
  const [selectedOption, setSelectedOption] = useState({});

  const handleChange = (selectedOption) => {
    setSelectedOption(selectedOption)
    console.log(selectedOption)
  };

  return (
    <div>

      <Example onHandleChange={handleChange} selectedOption={selectedOption}/>
      <Example onHandleChange={handleChange} selectedOption={selectedOption}/>
      <Example onHandleChange={handleChange} selectedOption={selectedOption}/>

    </div>
  );
}

Путем изменения каждого примера значение предыдущего выбранного параметра удаляется. как поместить (объединить) все выбранные опции в один объект?

Ответы [ 2 ]

3 голосов
/ 11 апреля 2020

Вам нужно будет поддерживать отдельные значения параметров для всех Example экземпляров.

Примерно так: 

export default function UserProfile() {
    const [selectedOption, setSelectedOption] = useState({ example1: '', example2: '', example3: '' });

    const handleChange = (key, selectedOption) => {
        setSelectedOption(prev => ({...prev, [key]: selectedOption}));
        console.log(selectedOption)
    };

    return (
        <div>
            <Example1 onHandleChange={(value) => handleChange('example1', value)} selectedOption={selectedOption.example1}/>
            <Example2 onHandleChange={(value) => handleChange('example3', value)} selectedOption={selectedOption.example2}/>
            <Example3 onHandleChange={(value) => handleChange('example3', value)} selectedOption={selectedOption.example3}/>
        </div>
    );
}

РЕДАКТИРОВАТЬ Рабочий код здесь:

https://codesandbox.io/s/eloquent-mclaren-8s2z2?file= / src / UserProfile. js

Также быстрое примечание - обновления состояния являются асинхронными, поэтому при выполнении console.log сразу после установки состояния вы можете увидеть старое состояние печати журнала.

Читайте больше здесь если вам нравится

0 голосов
/ 11 апреля 2020

Вы можете собрать все выбранные опции в один массив. Пожалуйста, найдите ссылку на рабочий раствор https://codesandbox.io/s/react-example-xk3bw?fontsize=14&hidenavigation=1&theme=dark

import React, { useState,useEffect } from "react";
import Example1 from "./Example";
import Example2 from "./Example";
import Example3 from "./Example";

export function UserProfile() {
  const [selectedOption, setSelectedOption] = useState({});
  const [allselectedOption, setAllSelectedOption] = useState([]);

  useEffect(() => {
    console.log(allselectedOption);
 },[allselectedOption]);

  const handleChange = selectedOption => {
    setSelectedOption(selectedOption);
    let newSelectedOptions = [...allselectedOption,selectedOption]
    setAllSelectedOption(newSelectedOptions)
    console.log(newSelectedOptions);
  };

  return (
    <div>
      <Example1 onHandleChange={handleChange} selectedOption={selectedOption} />
      <Example2 onHandleChange={handleChange} selectedOption={selectedOption} />
      <Example3 onHandleChange={handleChange} selectedOption={selectedOption} />
    </div>
  );
}
...