1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import { connect } from 'react-redux'; import TopicSelector from '../components/topicSelector'; import { setTopic } from '../actions'; const mapStateToProps = state => { return { topic: state.topic } } const mapDispatchToProps = dispatch => { return { setTopic: topic => { dispatch(setTopic(topic)) } } } export default connect( mapStateToProps, mapDispatchToProps )(TopicSelector); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | import React from 'react'; export const TopicSelector = React.createClass({ propTypes: { topic: React.PropTypes.string.isRequired }, componentDidMount: function() { function putCursorAtEnd(input) { const value = input.value; input.value = ''; input.value = value; } let input = this.refs.input; input.focus(); putCursorAtEnd(input); }, handleChange: function(event) { this.props.setTopic(event.target.value); }, handleKeyPress: function(event) { if(event.key == 'Enter') { this.props.setTopic(event.target.value); } }, render: function() { const styles = { topic: { marginRight: '10px', fontFamily: 'tahoma', fontSize: '18px' }, input: { fontFamily: 'tahoma', fontSize: '16px', marginRight: '10px' } }; const topic = this.props.topic; return( <span> <span style={styles.topic}> Topic </span> <input type='text' ref='input' style={styles.input} defaultValue={topic} value={topic} onChange={this.handleChange} onKeyPress={this.handleKeyPress}/> </span> ); } }) TopicSelector.propTypes = { topic: React.PropTypes.string.isRequired, setTopic: React.PropTypes.func.isRequired, fetchTopic: React.PropTypes.func.isRequired, }; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import { connect } from 'react-redux'; import DisplayMode from '../components/displayMode'; import { setDisplayMode } from '../actions'; const mapStateToProps = null; const mapDispatchToProps = dispatch => { return { setListing: () => { dispatch(setDisplayMode('LISTING')) }, setThumbnail: () => { dispatch(setDisplayMode('THUMBNAIL')) } } } export default connect( mapStateToProps, mapDispatchToProps )(DisplayMode); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | import React from 'react'; require('./book.css'); const DisplayMode = ({ setListing, setThumbnail, displayMode }) => { const switchToListing = function(event) { setListing(); }; const switchToThumbnail = function(event) { setThumbnail(); }; const styles = { radio: { marginLeft: '10px', cursor: 'pointer' }, radiospan: { marginLeft: '20px', fontFamily: 'tahoma', fontSize: '16px' } }; return( <span> <span style={styles.radiospan}> Thumbnail </span> <input type='radio' name='display' style={styles.radio} onChange={switchToThumbnail} checked={displayMode == 'THUMBNAIL'} value='thumbnail'/> <span style={styles.radiospan}> List </span> <input type='radio' name='display' style={styles.radio} onChange={switchToListing} checked={displayMode != 'THUMBNAIL'} value='list'/> </span> ); }; DisplayMode.propTypes = { setListing: React.PropTypes.func.isRequired, setThumbnail: React.PropTypes.func.isRequired, displayMode: React.PropTypes.string.isRequired }; export default DisplayMode; |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |