mercredi 20 septembre 2017

How to disable dropdown when a specific option is selected in React?

I have implemented a table using React Table(http://ift.tt/2vuA5sF). I populate the data based on the data I get from server. Right now I have two filter dropdowns on top of two columns. I want to disable column 2 filter dropdown if the column 1 filter dropdown is set to a specific value. enter image description here

I have implemented the basic filter dropdown as follows:

    {
              Header: 'Name',
              accessor: 'Name',
              id: 'Name',
              Cell: ({ value }) =>
              value === 'group1' ? 'group1' : 'group2',
              filterMethod: (filter, row) => {
                if (filter.value === 'all') {
                  return true;
                }
                if (filter.value === 'group1') {
                  return row[filter.id] === 'group1';
                }
              },
              Filter: ({ filter, onChange }) => (
                <select
                    onChange={event => onChange(event.target.value)}
                    style=
                    value={filter ? filter.value : 'all'}
                >
                  <option value="all">All</option>
                  <option value="group1">Group1</option>
                </select>
            ),
            },
            {
              filterable: ({ val }) => {
                  if (tenantName.value === 'group1') {
                    return true;
                  }
                  else {
                    return false;
                  }
              },
              Header: 'ID',
              accessor: 'Id',
              id: 'Id',
              Cell: ({ value }) => (value === '3' ? '3' : '5'),
              filterMethod: (filter, row) => {
                if (filter.value === 'all') {
                  return true;
                }
                if (filter.value === '3') {
                  return row[filter.id] === '3';
                }
                if (filter.value === '5') {
                  return row[filter.id] === '5';
                }

              },
              Filter: ({ filter, onChange }) => (
                <select
                    onChange={event => onChange(event.target.value)}
                    style=
                    value={filter ? filter.value : 'all'}
                >
                  <option value="all">All</option>
                  <option value="3">3</option>
                  <option value="5">5</option>
                </select>
            ),
            },
          ],

If I select Group1 in the first dropdown, the second dropdown needs to be enabled. However if the first dropdown is set to All then the dropdown 2 needs to be disabled. How to implement the above?

Aucun commentaire:

Enregistrer un commentaire