React Goods table
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container"></div>
CSS
.hovered {
background: rgba(255, 12, 80, 0.5);
}
.my-component {
margin: 1em;
padding: 1em;
border: 1px solid black;
cursor: pointer;
}
JavaScript 1.7
class MainComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
show_title1: true,
show_title2: false
}
}
checkedChange(name, val) {
this.setState({ [name]: val });
}
render() {
return (
<div>
<FilterItems
handleChange={this.checkedChange.bind(this)}
show_title1={this.state.show_title1}
show_title2={this.state.show_title2}>
</FilterItems>
<button onClick={this.applyChange}>Применить</button>
<Items
show_title1={this.state.show_title1}
show_title2={this.state.show_title2}>
</Items>
</div>
);
}
}
class FilterItems extends React.Component {
render() {
return (
<div>
<input onChange={(e) => this.props.handleChange('show_title1', e.target.checked)}
type="checkbox"
checked={this.props.show_title1}/>Столбец 1
<input onChange={(e) => this.props.handleChange('show_title2', e.target.checked)}
type="checkbox"
ref="show_title2"
checked={this.props.show_title2}/>Столбец 2
</div>
);
}
}
class Items extends React.Component {
render() {
return (
<div>
{this.props.show_title1 && <div>Первый столбец</div>}
{this.props.show_title2 && <div>Второй столбец</div>}
</div>
);
}
}
console.log('-------------');
ReactDOM.render(<MainComponent /> , document.getElementById('container'));