Прошу прощения за мои базовые знания и мой базовый английский :)
Мой вопрос: Как объединить значение переключателя [я использую переключатель для каждой записи в таблице]
это стол 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 Hai, спасибо за ваш ответ, я уже добавил больше кода, как создать таблицу :) мне нужна помощь: v
По-прежнему отсутствует содержимое компонента Table
, где вы создаете переключатели. Не могли бы вы предоставить и это?
@Rallen Обновлено, этого достаточно?
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
@OnesinusSaut Я изменю свою демонстрацию
братан, я имею в виду чистую строку, "1,3,4", а не список данных :) Я думаю, ты можешь мне помочь, братан
и, кстати, ваш код использует состояние, но в функции (не в классе) я могу использовать код? я беспокоюсь, что не могу, я обычно использую хук, а не состояние
Я изменяю свой код, чтобы отобразить выбранные значения. Если вы используете хуки, я думаю, вы знаете, как их использовать, и это сработает, если вы будете использовать тот же метод.
Понял, позвольте мне сначала попробовать, кстати, большое спасибо, Хосе :)
Это лайфхак, чтобы показать, как он может этого добиться, если бы у него были настоящие данные? Поскольку вы изменяете состояние, а также используете componentWillMount(), что небезопасно
@Hemanthvrm Я изменил состояние, чтобы быстро ответить ему. Я изменил его.
Согласно ответу @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>
Мы получили объединенное значение в строковом формате.
Спасибо.
Было бы полезно найти решение, если бы вы предоставили больше кода, например, как вы создаете таблицу.