在React.Component中使用react-switch进行更新

时间:2018-11-21 07:01:40

标签: java reactjs meteor constructor switching

我已将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);

0 个答案:

没有答案