Использование response-switch в React.Component для обновления - PullRequest
0 голосов
/ 21 ноября 2018

Я использовал withTracker для получения данных.Также используется реагирующий переключатель.Все работают хорошо для вставки.Сейчас я работаю над страницей обновления.Все данные могут обновляться без реакции-переключения, потому что я не могу показать статус обновления для коммутатора, который уже вставлен.Нам известно, что на странице обновления нужно показывать ранее вставленные данные.React-switch - это используемый конструктор, и я не могу вызвать данные в constractor.Я могу вызвать данные в 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);
...