Я работаю над React Table.Я в основном новичок в React.У меня есть страница панели инструментов, где я отображаю таблицу реакции из 8 столбцов.У меня есть кнопка настройки, которая открывает всплывающую страницу, эта всплывающая страница имеет 8 флажков, позволяющих мне показывать / скрывать эти столбцы React.Изначально все флажки на этой всплывающей странице установлены в значение true.Когда я снимаю отметку со столбца, этот конкретный столбец отключается.
Это код всплывающей страницы для флажка
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);
Я новичок в React, и мне нужна помощь этого сообщества.Пожалуйста, помогите реализовать эту идею.
Можно ли передать константы (true / false) или передать состояние.Я хочу перевести логическое значение для каждого столбца из компонентов \ abcdashboard \ custom_view \ Customizedview в компоненты \ common \act_table \ ReactTableComponent
Пожалуйста, посмотрите внимательно.Обратите внимание на строки после
this.setState({ items: newItems });
Я попытался экспортировать константы, но получил ошибку.Я думаю, что React не позволяет нам экспортировать константы.Если я перенесу состояние, как мне получить состояние из компонентов \ abcdashboard \ custom_view \ Customizedview в компоненты \ common \act_table \ ReactTableComponent
Следует отметить, что эти компоненты не являются Parent - Child.Вы можете проверить пути к файлам.
Будучи новичком, я понятия не имею о Redux.Хотя у меня есть подключение Redux, но я не знаю, как это использовать.Так как я могу получить доступ к состоянию из компонентов \ abcdashboard \ custom_view \ Customizedview в компонентах \ common \act_table \ ReactTableComponent
export default connect(mapStateToProps, mapDispatchToProps)(CustomizedView);
Итак, у меня есть функции mapStateToProps и mapDispatchToProps
function mapStateToProps(state) {
return {
auth: state.auth
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
}
Я простонеобходимо перенести 8 флагов / логических значений из компонентов \ abcdashboard \ custom_view \ Customizedview в компоненты \ common \ react_table \ ReactTableComponent