Question

有没有办法让日历字形在点击时打开日期时间选择器？我目前只有按钮，但无法点击。我一直在努力寻找特定于React的东西。

<div className={class}>
    <i className="glyphicon glyphicon-calendar"></i>
</div>

Answer 1

您只需在

上绑定onClick事件即可

<i onClick={this.showCalendar.bind(this)} className="glyphicon glyphicon-calendar"></i>`

并在组件的showCalendar函数中编写逻辑以显示Calendar组件。有关事件处理的更多详细信息，请查看官方documentation的反应。

组件state用于组件的条件呈现。你应该把所有可以改变视图的变量放在组件的状态对象中并调用setState方法来更新状态，它会自动重新渲染组件。

下面给出了一个样本组件

＆＃13;

class SimpleExample extends React.Component {
	constructor(props){
		super(props);
		this.state = { showCalendar: false };
		this.showCalendar = this.showCalendar.bind(this);
		this.hideCalendar = this.hideCalendar.bind(this);
	}
	
	showCalendar(){
		this.setState({ showCalendar: true });
	}
	
	hideCalendar(){
		this.setState({ showCalendar: false });
	}
	
	render() {
		return (
			<div>
				<button onClick={this.showCalendar}>Show Calendar</button>
				{this.state.showCalendar &&
					<div style={{border: 'solid 1px gray'}}>
						<h3>Calendar</h3>
						<button onClick={this.hideCalendar}>Hide Calendar</button>
					</div>
				}
			</div>
		);
	}
}

ReactDOM.render(<SimpleExample />, document.getElementById('example'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>

＆＃13;

如果您是React.js的新手，请阅读documentation，这非常有帮助且非常简单

使用React JS可以使用Glyphicon Calendar图标进行点击

1 个答案: