OnRowSelect Setze Zustand in JS React - Erlaube gefilterte Route Auswahl

Question

Ich versuche ein Argument zu übergeben, indem ich 'fooId' auf einen temporären Zustand setze, um den Standardfilter für den Benutzer auf alle 'fooId' innerhalb eines react-data zu setzen -grid, wenn sie auf die Zeile geklickt haben (ein Zellenwert, der zum Filtern verwendet wurde). Ich dachte, ich könnte eine Funktion machen, um den Zustand einzustellen und den Filter zu passieren. Das Backend und unterstützende Sagas, Reducer, ect wurden entwickelt, um die Weitergabe von Daten zu unterstützen. Ich muss nur diese Änderung in der Standardfilterung herausfinden, um den Filter auf 'gefilterte Daten' zu setzen. Hoffe, dass es Sinn macht ... Bitte sehen anwendbar Code unten, Dank:

function FooBar({fooBar, filteredData, fooBarSearch, toDate, fromDate, searchText, foobar}) { 

let filterData = fooBar.slice(); 
function onRowClickFoo(event) { let fooBarId = set.state.fooId return 
selectRoute('bar/whee/' + fooId); } 

return (

<div> 
    <Grid fluid> 
     <Row className={styles.fooPage}> 
      <Col xs={12} md={3}> 
       <AutoComplete 
        floatingLabelText="Search Foo" 
        filter={AutoComplete.caseInsensitiveFilter} 
        openOnFocus={true} 
        dataSource={foobar} 
        searchText={searchText} 
        dataSourceConfig={{text: 'fooId', value: 'fooId'}} 
        onUpdateInput={searchOnUpdateHandler} 
        onNewRequest={searchOnNewRequest} 
        maxSearchResults={8} 
       /> 
      </Col> 
      <Col xs={12} md={3}> 
       <DatePicker 
        onChange={fromDateOnChangeHandler} 
        floatingLabelText="Filter Start Date" 
        autoOk={true} 
        value={fromDate} 
        mode="landscape" 
        firstDayOfWeek={0} 
        shouldDisableDate={disableStartDays} 
       /> 
      </Col> 
      <Col xs={12} md={3}> 
       <DatePicker 
        onChange={toDateOnChangeHandler} 
        floatingLabelText="Filter End Date" 
        autoOk={true} 
        value={toDate} 
        mode="landscape" 
        firstDayOfWeek={0} 
        shouldDisableDate={disableEndDays} 
       /> 
      </Col> 
      <Col xs={12} md={3} className={styles.resetButton}> 
       <RaisedButton 
        label="Reset" 
        secondary={true} 
        onTouchTap={handleResetFilter} 
       /> 
      </Col> 
     </Row> 
     <Row> 
      <Col xs={12}> 
       <fooBarGrid className={styles.fooBarGrid} 
           columnHeaders={columnHeaders} 
           rows={filteredData} 
           enableRowSelect={true} 
           onRowSelect={onRowClickFoo} 
       /> 

Answer 1

Es ist irgendwie schwer zu verstehen, was du für, aber ... ich glaube, ich verstehe.

Wenn Sie Komponente lokalen Zustand verwenden möchten, müssen Sie entweder einen Klasse Component verwenden oder eine HOC verwenden Sie den Zustand für Sie zu speichern (die recompose Paket hat withState, die ich sehr sehr nützlich).

Beispiel; Vanille Reagieren

class Foo extends React.Component { 
    state = { 
    filter: null 
    } 

    render() { 
    const { data } = this.props 
    const { filter } = this.state 

    const mData = data.filter((dataRow) => dataRow.id === filter) 

    return (
     /* use mData */ 
    ) 
    } 
} 

mit recompose

const Foo = ({ data, filter, setFilter }) => { 
    const mData = data.filter((dataRow) => dataRow.id === filter) 
    const onRowClick = (event) => setFilter(/* whatever you want to filter to */) 

    return (
    /* use mData */ 
) 
} 

export default withState("filter", "setFilter", null)(Foo)