JS React中的Onrowselect设置状态 - 允许过滤路由选择

Question

我正在尝试通过一个参数，将'fooid'设置为临时状态，允许我设置用户在react-data-grid中为用户设置默认过滤器他们单击了行(用于过滤的单元格值(。我认为我可以发挥功能来设置状态并通过过滤器将其传递。后端和支持的传奇，还原和ECT构建以支持传递数据。我只需要弄清楚默认过滤中的此更改即可将过滤器设置为切片" FelterData"。希望这有意义...请在下面查看适用的代码，谢谢：

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

很难理解您的目标，但是...我想我理解。

如果要使用组件 - 本地状态，则必须使用组件 class ，或使用HOC为您存储状态(recompose软件包具有withState，我找到非常有用的(。

示例;香草反应

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 */
    )
  }
}

使用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)