使 Glyphicon 日历图标可与 React JS 一起点击

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>`

并在组件的显示日历函数中编写逻辑以显示日历组件。 有关事件处理的更多详细信息，请查看 react 的官方文档。

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

下面给出了一个示例组件

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'));

<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>

如果你是 React 的新手.js请阅读 react 文档，它非常有用且简单