我正在学习reactJS，我在教程中创建了一个日历。现在我想改进它并显示点击时间我希望显示新组件（小时），当我点击Bigger组件内的小组件（日）时（小时）现在它不起作用正确的，因为当我点击日历组件的每个部分而不是一天时我可以渲染新的组件...我正在与它争斗一个星期但仍然没有找到任何解决方案，对我来说最重要的是如何当我点击<Hours/>组件内的<Day/>组件时，传递我想要呈现<Calendar/>组件的信息。
主要组件
class Order extends Component {
constructor() {
super();
this.state = {
clicked: false,
clickedOption: false,
clickedCalendar: false,
clickedHours: false,
};
this.nameClick = this.nameClick.bind(this);
}
showCategory() {
this.setState({
clickedOption: !this.state.clickedOption
})
}
nameClick() {
this.setState({
clicked: !this.state.clicked
})
}
showHours() {
this.setState({
clickedHours: !this.state.clickedHours
})
}
render() {
return (
<div>
<TimeCalendar/>
<Employee onClick={() => this.showCategory()}/>
{this.state.clickedOption && <Categories onClick={() => this.nameClick()}/>}
{this.state.clicked && <Calendar onClick={() => this.showHours()}/>}
{this.state.clickedHours && <Hours/>}
</div>
)
}
}
日历组件
class Calendar extends Component {
constructor(props) {
super(props);
this.state = {
disabled: false,
month: moment(),
selected: moment().startOf('day')
};
this.previous = this.previous.bind(this);
this.next = this.next.bind(this);
}
previous() {
const {
month,
} = this.state;
this.setState({
month: month.subtract(1, 'month')
});
}
next() {
const {
month,
} = this.state;
this.setState({
month: month.add(1, 'month'),
})
}
select(day) {
this.setState({
selected: day.date,
month: day.date.clone(),
});
}
renderWeeks() {
let weeks = [];
let done = false;
let date = this.state.month.clone().startOf('month').add("w" - 1).day('Sunday');
let count = 0;
let monthIndex = date.month();
const {
selected,
month,
} = this.state;
while (!done) {
weeks.push(
<Week
key={date}
date={date.clone()}
month={month}
select={(day) => this.select(day)}
selected={selected}
/>
);
date.add(1, 'w');
done = count++ > 2 && monthIndex !== date.month();
monthIndex = date.month();
}
return weeks;
}
renderMonthLabel() {
const {
month
} = this.state;
return <span className="month-label">{month.format("MMMM YYYY")}</span>;
}
previousMonth() {
let lastMonth = this.state.month.subtract('month', 1).calendar();
if (lastMonth === true) {
this.state.disabled = true
} else {
this.state.disabled = false
}
}
render() {
return (
<div className="col-xs-4">
<section className="calendar" {...this.props}>
<header className="header">
<div className="month-display row">
<i className="arrow fa fa-angle-left" /*disabled={this.previousMonth()}*/
onClick={this.previous}/>
{this.renderMonthLabel()}
<i className="arrow fa fa-angle-right" onClick={this.next}/>
</div>
<DayNames/>
</header>
{this.renderWeeks()}
</section>
</div>
)
}
}
周日组件
class Week extends Component {
constructor(props) {
super(props);
this.state = {
showHours: false
}
}
showHours() {
this.setState({
showHours: true
})
}
render() {
let days = [];
let {
date,
} = this.props;
const {
month,
selected,
select,
} = this.props;
for (let i = 0; i < 7; i++) {
let day = {
name: date.format('dd').substring(0, 1),
number: date.date(),
isCurrentMonth: date.month() === month.month(),
isToday: date.isSame(new Date(), 'day'),
date: date
};
days.push(
<Day
day={day}
selected={selected}
select={select}
key={day.num}
/>
)
;
date = date.clone();
date.add(1, 'day');
}
return (
<div className="row week" key={days[0]}>
{days}
</div>
)
}
}
class Day extends Component {
render() {
const {
day,
day: {
date,
isCurrentMonth,
isToday,
number
},
select,
selected
} = this.props;
return (
<span
key={date.toString()}
className={"day" + (isToday ? " today" : "") + (isCurrentMonth ? "" : " different-month") + (date.isSame(selected) ? " selected" : "")}
onClick={() => {select(day)}}>
{number}
</span>
)
}
}
小时组件
class Hours extends Component {
constructor(props) {
super(props)
}
render() {
const marginStyle = {
marginTop: "10px"
};
return (
<div {...this.props} className="block-hours col-xs-4">
<form action="">
<span className="block-hours hour-element">
8:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
8:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
9:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
9:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
10:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
10:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
11:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
11:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
12:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
12:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
13:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
13:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
14:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
14:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
15:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
15:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
16:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
16:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
17:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
17:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
18:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
18:30
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
19:00
<input type="radio" name="hours"/>
</span>
<span className="block-hours hour-element">
19:30
<input type="radio" name="hours"/>
</span>
<br/>
<div style={marginStyle}></div>
<button className="btn btn-primary btn-custom-color">Zapisz się na wizytę</button>
</form>
</div>
)
}
}
答案 0 :(得分：1)
单击日历时调用onClick，但是您应该将此函数作为prop传递：
{this.state.clicked && <Calendar showHours={this.showHours}/>}
在caledar中，只需在点击日期时调用此函数：
select(day) {
this.setState({
selected: day.date,
month: day.date.clone(),
});
this.props.showHours();
}