Как собрать значение Switch в React JS + Ant Design

Прошу прощения за мои базовые знания и мой базовый английский :)

Мой вопрос: Как объединить значение переключателя [я использую переключатель для каждой записи в таблице]

это стол https://ibb.co/3TVLBK6

Я создал таблицу с одной ячейкой/полем с помощью переключателя (вкл./выкл.) И я хочу получить значение переключателя, когда они включены

А вот код

const columnsTableDepartmentModal = [
{
  title: 'No',
  dataIndex: 'no',
  key: 'no',
}, 
{
  title: 'Department',
  dataIndex: 'department',
  key: 'department',
}, 
{
  title: 'Select',
  dataIndex: 'select_department',
  key: 'select_department',
  render: (e, record) => (
    <Switch 
      defaultChecked = {e} 
      onChange = {
        (value) => onChangeSwitch(value,record)
      } 

      checkedChildren = "Yes"
      unCheckedChildren = "No"
      />
  ),
}];

Это то, что я сейчас пытаюсь

function onChangeSwitch(isSelect,record){
  console.info(e); // True / False
  console.info(record); // True / False

  if (isSelect){
    // push data to array
  }

  if (!isSelect){
    // pop data from array

  }
}

Вот как я показываю таблицу

<Modal
        title = {modalDepartmentTitle}
        visible = {visibleDepartment}
        width = {800}
        onOk = {handleOkDepartment}
        onCancel = {handleCancelDepartment}  
        footer = {[
          <Button key = "submit" type = "primary" onClick = {handleOkDepartment}>OK</Button>,
          <Button key = "button" type = "danger" onClick = {handleDeleteDepartment}>DELETE</Button>,
          <Button key = "back" onClick = {handleCancelDepartment}>CANCEL</Button>,
        ]}
      >
        <Table 
          columns = {columnsTableDepartmentModal}  
          dataSource = {stateDepartment.data} 
          pagination = {false} 
          scroll = {{y: 325}}
          />
    </Modal>

Ожидаемый результат: 1,3,4

Было бы полезно найти решение, если бы вы предоставили больше кода, например, как вы создаете таблицу.

Rallen 09.05.2019 09:54

@Rallen Hai, спасибо за ваш ответ, я уже добавил больше кода, как создать таблицу :) мне нужна помощь: v

Onesinus Saut 09.05.2019 09:57

По-прежнему отсутствует содержимое компонента Table, где вы создаете переключатели. Не могли бы вы предоставить и это?

Rallen 09.05.2019 10:05

@Rallen Обновлено, этого достаточно?

Onesinus Saut 09.05.2019 10:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
4
4
6 294
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Switch from 'react-switch'; 

class App extends Component {
  constructor() {
    super();
    this.state = {
      checkedPos: [],
      info: [],
    };
  }

  componentWillMount()
  {
     let tmp = []
     let pos = []
     for (var i = 1; i < 6; i++) {
       tmp.push("Info " + i)
       pos.push(false);
     }
     this.setState({
       info: tmp,
       checkedPos: pos
     })
   }

  handleChangeEvent(index, info)
  {
    if (!this.state.checkedPos[index])
    {
      this.setState(prev => ({
         checkedPos: prev.checkedPos.map((val, i) => !val && i === index ? true : val),
      }))
    }
    else if (this.state.checkedPos[index])
    {
      this.setState( prev => ({
         checkedPos: prev.checkedPos.map((val, i) => val && i === index ? false : val),
      }))
    }
  }

  render() {
    const listItems = this.state.info.map((item, index) =>
      <div>
        {item}
        <Switch checked = {this.state.checkedPos[index]}
          onChange = { () => this.handleChangeEvent(index, this.state.info[index])}/>
        {"  Value is " + this.state.checkedPos[index]}
      </div>
    );

    return (
      <div>
        {listItems}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Демо здесь

Привет, братан, спасибо за ответ, но мой ожидаемый результат: 1,3,4

Onesinus Saut 09.05.2019 10:31

@OnesinusSaut Я изменю свою демонстрацию

josemartindev 09.05.2019 10:37

братан, я имею в виду чистую строку, "1,3,4", а не список данных :) Я думаю, ты можешь мне помочь, братан

Onesinus Saut 09.05.2019 10:42

и, кстати, ваш код использует состояние, но в функции (не в классе) я могу использовать код? я беспокоюсь, что не могу, я обычно использую хук, а не состояние

Onesinus Saut 09.05.2019 10:51

Я изменяю свой код, чтобы отобразить выбранные значения. Если вы используете хуки, я думаю, вы знаете, как их использовать, и это сработает, если вы будете использовать тот же метод.

josemartindev 09.05.2019 10:51

Понял, позвольте мне сначала попробовать, кстати, большое спасибо, Хосе :)

Onesinus Saut 09.05.2019 10:53

Это лайфхак, чтобы показать, как он может этого добиться, если бы у него были настоящие данные? Поскольку вы изменяете состояние, а также используете componentWillMount(), что небезопасно

Hemanthvrm 09.05.2019 20:07

@Hemanthvrm Я изменил состояние, чтобы быстро ответить ему. Я изменил его.

josemartindev 10.05.2019 09:53

Согласно ответу @jose, я реализовал концепцию подключения с помощью этого кода.

  const [theArray, setTheArray] = useState([]);
  const addEntry = useCallback((value) => {
    setTheArray([...theArray, `${value}`]);
  });

Затем в функции мы можем добавить значение

 function onChangeSwitch(isSelect,record){
  console.info(isSelect); // True / False
  console.info(record); 


  addEntry(record.no);

  if (isSelect){
    // push data to array
  }

  if (!isSelect){
    // pop data from array

  }
}

Итак, когда мы отображаем {enty}

 <div key = "adkfkdfkda">{theArray.map(entry =>
            <span key = {entry}>{entry},</span>
     )}
 </div>

Мы получили объединенное значение в строковом формате.

https://ibb.co/nQFK1C4

Спасибо.

Другие вопросы по теме