Как управлять DatePicker onSelectDate для динамического управления - PullRequest
Новая
       50

Как управлять DatePicker onSelectDate для динамического управления

0 голосов
/ 15 октября 2019

В моем приложении с использованием реагирования, SPFX 1.8 и office-ui-fabric-реагировать 6.189.2 я хочу управлять onSelectDate на динамически созданном элементе управления, который является частью таблицы.

Я уже нашелОбходной путь с раскрывающимся списком с использованием свойства id html элемента управления, чтобы узнать, какой элемент нужно изменить в состоянии, но я не могу получить событие формы или получить другие реквизиты для DatePickerControl. Как я могу добиться этого на React правильным способом? Я хочу изменить состояние нужного элемента. 

    {///Function to create elements


     private _renderTable(): React.ReactNode {
    return (<div> 
            <table >
              <thead>
                <td>Title</td>
                <td>DropDown</td>
                <td>DatePicker</td>
              </thead>
              <tbody> 
                {this.state.elements.map( x=> {
                   return((<tr key={"item" + x.Id}>
                    <td>{x.Title} </td>
                    <td><Dropdown 
                      id= {"DropD" + x.Id}
                      placeholder="Select an option"
                      selectedKey={this.state.elements.filter(item=> x.Id === item.Id )[0].DropDownField?this.state.elements.filter(item=> x.Id === item.Id )[0].DropDownField.Id:0}
                      label=""
                      onChange ={this.handleDropDown}
                      options={this.state.DropDownOptions.map(item=>                 
                      {return 
                          {key:item.Id, text:item.Title};})}
                      style={{ width:"150px"}} /></td>
                    <td> 
                    <DatePicker
                        style={{display:"inline-block"}}
                        onSelectDate={this._onChangeDPicker}
                        firstDayOfWeek = {DayOfWeek.Sunday}
                        strings = {DayPickerStrings}
                        placeholder="Select Date"
                        value={this.state.elements.filter(item=> 
                                x.Id === item.Id)[0].DateField}
                      />

                   );
                });

    }
    ///Function to DatePicker
    private _onChangeDPicker(date: Date | null | undefined) {
    /////     ????????
        // this.setState({
        //  ??????????
        // });
      }

    ///Function to manage DropDown
      private handleDropDown(event: React.FormEvent<HTMLDivElement>,         option: IDropdownOption, index?: number) {
        const auxDropDownOptions= this.state.DropDownOptions.filter(t=> t.Id === option.key)[0];
        let auxId = parseInt(event.target["id"].replace("DropD", ""));
        let auxArray = this.state.elements;
        auxArray.filter(x=> x.Id === auxId)[0].DropDownField=  auxDropDownOptions;

        this.setState({
          elements: auxArray,
        });
        return;
      }
    }
...