我已将withTracker用于数据提取。也用于反应开关。一切都适合插入。现在,我正在更新页面。没有react-switch,所有数据都可以更新,因为我无法显示已插入的交换机的更新状态。我们以更新页面而闻名,需要显示先前插入的数据。 React-switch用于构造函数,我无法在承包商中调用数据。我可以在render()中调用数据。
我的问题是如何检查/未选中开关字段?
是否需要检查选中的开关。我该怎么办?
class EditEvent extends React.Component{
//Date and Status switcher functions
constructor(props) {
super(props);
this.state = {
startDate: moment(),
checked: true
};
this.handleChange = this.handleChange.bind(this);
this.switchChange = this.switchChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
EventUpdate(e){
e.preventDefault();
let eventStatus = this.state.checked;
console.log(eventStatus);
Events.update(
{_id : myId},
{ status: eventStatus },
function(err) {
if (err){$("#message").removeClass("alert-success").addClass("alert-danger").text(err.reason);}
else{$('.upload-event-from').trigger("reset");}
}
);
}
render(){
const {
loading,
updateData,
} = this.props;
return loading ? null : (
<div>
<PrivateHeader title="Discover Page"/>
<form className="upload-event-from plr-15" onSubmit={this.EventUpdate.bind(this)}>
<div className="user-type">
Event Status
<label htmlFor="icon-switch">
<Switch
name="eventType"
checked={this.state.checked}
onChange={this.switchChange}
uncheckedIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 15,
color: "white",
paddingRight: 10
}}>
Public
</div>
}
checkedIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 15,
color: "white",
paddingLeft: 10
}}>
Private
</div>
}
offColor="#7e01ff"
onColor="#008000"
offHandleColor="#008000"
onHandleColor="#7e01ff"
height={30}
width={85}
className="react-switch"
id="icon-switch"
/>
</label>
</div>
<span id="message" ></span>
<center>
<button type="submit" className="btn app-btn">Update</button>
</center>
</form>
<PrivateFooter title="Events Page"/>
</div>
);
}
}
export default withTracker((props) => {
const subscription = Meteor.subscribe('allowedData');
const handle = props.match.params.id;
return {
loading: !subscription.ready(),
updateData: Events.findOne({_id:handle}),
};
})(EditEvent);