Я работаю над React Table.Я в основном новичок в React.У меня есть страница панели инструментов, где я отображаю таблицу реакции из 8 столбцов.У меня есть кнопка настройки, которая открывает всплывающую страницу, эта всплывающая страница имеет 8 флажков, позволяющих мне показывать / скрывать эти столбцы React.Изначально все флажки на этой всплывающей странице установлены в значение true.Когда я снимаю отметку со столбца, этот конкретный столбец отключается.
В конце есть изображения, чтобы увидеть, что я пытаюсь сделать.
Я буду использовать эту логику для столбцов show hide (этовопрос был задан мной два дня назад) - Вы можете увидеть, как это делается, используя атрибут / свойство React Table с именем show .Когда show is true, столбец / подколон отображается, а когда show false, столбец / подколон скрыт.
Данные таблицы реагирования выглядят следующим образом
const columns = [
{
Header: 'Column 1',
accessor: 'firstName',
// show: true // shows the particular column (true is default)
// show: false // hides the particular column
},
{
Header: 'Column 2',
accessor: 'firstName',
},
{
Header: 'Column 3',
accessor: 'firstName',
},
{
Header: 'Column 4',
accessor: 'firstName',
},
{
Header: 'Column 5',
accessor: 'firstName',
},
{
Header: 'Column 6',
accessor: 'firstName',
},
{
Header: 'Column 7',
accessor: 'firstName'
},
{
Header: 'Column 8',
accessor: 'firstName',
}
];
Теперь посмотритена этом изображении.На рисунке показана страница панели инструментов, а также всплывающая страница с флажками, которая может включать / отключать мой столбец (или отображать / скрывать)
Этокод для всплывающей страницы для флажка
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from '../../../actions';
import ButtonComponent from '../../common/button/ButtonComponent';
import { CheckBox } from '../../common/chkbox/CheckBox';
class CustomizedView extends Component {
constructor(props) {
super(props);
this.handleCheckChildElement = this.handleCheckChildElement.bind(this);
this.state = {
items: [
{ id: 1, value: 'Column 1', isChecked: true },
{ id: 2, value: 'Column 2', isChecked: true },
{ id: 3, value: 'Column 3', isChecked: true },
{ id: 4, value: 'Column 4', isChecked: true },
{ id: 5, value: 'Column 5', isChecked: true },
{ id: 6, value: 'Column 6', isChecked: true },
{ id: 7, value: 'Column 7', isChecked: true },
{ id: 8, value: 'Column 8', isChecked: true },
]
};
}
handleClick() {
this.setState({ isChecked: !this.state.isChecked });
}
handleCheckChildElement(event) {
const { items } = this.state; //extract state values like this to a const variable
const newItems = items.map((item) => { //do map on items because map returns a new array. It’s good practice to use .map than forEach in your case
if(item.value === event.target.value) {
item.isChecked = event.target.checked;
return item; //return updated item object so that it will be pushed to the newItems array
}
return item; // return item because you need this item object as well
});
this.setState({ items: newItems }); //finally set newItems array into items
const column1checked = items[0].isChecked;
console.log('column1checked ' + column1checked);
const column2checked = items[1].isChecked;
console.log('column2checked ' + column2checked);
const column3checked = items[2].isChecked;
console.log('column3checked ' + column3checked);
const column4checked = items[3].isChecked;
console.log('column4checked ' + column4checked);
const column5checked = items[4].isChecked;
console.log('column5checked ' + column5checked);
const column6checked = items[5].isChecked;
console.log('column6checked ' + column6checked);
const column7checked = items[6].isChecked;
console.log('column7checked ' + column7checked);
const column8checked = items[7].isChecked;
console.log('column8checked ' + column8checked);
}
render() {
return (
<div className='div-container-custom' >
<div className='bottomBar'>
<ButtonComponent
text='Apply'
className='activeButton filterMargin-custom'
width='100'
display='inline-block'
onClick={() => { this.props.applyFilter(this.state, false); }}
/>
<ButtonComponent
text='Clear Filter'
className='greyedButton clear-custom-filter'
width='100'
display='block'
marginTop='60'
onClick={() => { this.props.applyFilter(this.state, true); }}
/>
</div>
<div>
<div className='data-points-text'>
<span> Columns </span>
</div>
<div className="App">
<ul>
{
this.state.items.map((item, i) => {
return (<div key={i} ><CheckBox handleCheckChildElement={this.handleCheckChildElement} {...item} /></div>);
})
};
</ul>
</div>
</div>
</div>
);
}
}
CustomizedView.propTypes = {
applyFilter: PropTypes.func.isRequired
};
CustomizedView.defaultProps = {
};
function mapStateToProps(state) {
return {
auth: state.auth
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(CustomizedView);
Теперь моя точка зрения заключается в том, что когда я снимаю флажок только с 4-го столбца на всплывающей странице флажка, я получаю нужные значения (код выше)
column1checked true
column2checked true
column3checked true
column4checked false
column5checked true
column6checked true
column7checked true
column8checked true
И, в конечном счете, это моя страница-флажок
import React from 'react';
import PropTypes from 'prop-types';
export const CheckBox = (props) => {
// super(props);
return (
<li>
<input key={props.id} onClick={props.handleCheckChildElement} type="checkbox" checked={props.isChecked} value={props.value} /> {props.value}
</li>
);
};
CheckBox.propTypes = {
id: PropTypes.string,
handleCheckChildElement: PropTypes.func,
isChecked: PropTypes.bool,
value: PropTypes.string,
};
export default CheckBox;
Теперь мой вопрос: у меня есть константы в компоненте CustomizedView.Мне нужны эти переменные const, доступные в компоненте ReactTable (путь такой: '../../common/chkbox/CheckBox')
На главной странице панели мониторинга я импортирую таблицу React
import ReactTableComponent from '../common/react_table/ReactTableComponent';
и просто используйте его в функции рендеринга главной страницы панели инструментов таким образом.
<ReactTableComponent />
Поэтому мне нужно использовать все эти константные переменные настраиваемых переменных в компоненте ReactTable, чтобы показать / скрыть таблицы.
Также здесь я должен использовать show: some_const (я не могу использовать true или false)
Я новичок в React и мне нужна помощь этого сообщества.Пожалуйста, помогите реализовать эту идею.
Все, что я хочу знать, лучший / самый простой (может быть, отличный или тупой способ) способ передачи этих 8 константных переменных из компонентов \ abcdashboard \ custom_view\ Настраиваемое представление для компонентов \ common \act_table \ ReactTableComponent