单击按钮时过滤

Question

我目前有一个通过 github 存储库过滤的搜索输入。然后我有一个下拉选择，允许用户根据使用的代码的语言进行过滤。相反，我想使用按钮而不是下拉菜单。有没有一种方法可以过滤点击结果，而不是像我在下拉菜单中所做的那样。我的代码如下：

const Profile = () => {
  const [formData, setFormData] = useState(INITIAL_STATE)
  const [updated, setUpdated] = useState(false)
  const [created, setCreated] = useState(false)
  const { data } = useContext(GithubContext)

  const handleUpdated = () => {
    setUpdated(!updated)
    data &&
      data.sort((a, b) => {
        if (updated) return a.updated_at > b.updated_at ? -1 : 1
        return a.updated_at > b.updated_at ? 1 : -1
      })
  }

  const handleCreated = () => {
    setCreated(!created)
    data &&
      data.sort((a, b) => {
        if (created) return a.created_at > b.created_at ? -1 : 1
        return a.created_at > b.created_at ? 1 : -1
      })
  }

  const handleInputChange = field => e => {
    setFormData({ ...formData, [field]: e.target.value })
  }

  const classes = useStyles()
  return (
    <>
      <div style={{ marginTop: 85, marginBottom: 85 }}>
        <Container className={classes.dashboardContainer}>
          <Card className={classes.card} style={{ width: '100%' }}>
            <CardContent className={classes.content}>
              <div className={classes.form}>
                <Grid
                  container
                  spacing={2}
                  alignItems='center'
                  justify='space-between'
                >
                  <Grid item sm={4} xs={12} className={classes.grid}>
                    <SelectStatus
                      language={formData.language}
                      handleInputChange={handleInputChange}
                    />
                  </Grid>
                  <Grid item sm={4} xs={12} className={classes.grid}>
                    <TextField
                      className={classes.jobField}
                      margin='normal'
                      fullWidth
                      id='search'
                      name='search'
                      label='Search by Title'
                      placeholder='Search by Title'
                      onChange={handleInputChange('search')}
                      value={formData.search}
                    />
                  </Grid>
                  <Grid item sm={2} xs={12} className={classes.grid}>
                    <Button
                      variant='contained'
                      color='primary'
                      onClick={handleUpdated}
                    >
                      Updated {updated ? '(oldest)' : '(newest)'}
                    </Button>
                  </Grid>
                  <Grid item sm={2} xs={12} className={classes.grid}>
                    <Button
                      fullWidth
                      variant='contained'
                      color='primary'
                      onClick={handleCreated}
                    >
                      Created {created ? '(oldest)' : '(newest)'}
                    </Button>
                  </Grid>
                </Grid>
              </div>
            </CardContent>
          </Card>
          <div
            style={{
              textAlign: 'center'
            }}
          >
            <Button variant='outlined' color='primary'>
              JavaScript
            </Button>
            <Button variant='outlined' color='primary'>
              Primary
            </Button>
            <Button variant='outlined' color='primary'>
              Secondary
            </Button>
            <Button variant='outlined' color='primary'>
              Disabled
            </Button>
            <Button variant='outlined' color='primary'>
              Link
            </Button>
            <br />
          </div>
        </Container>
        {!data ? (
          <h1 className={classes.loading}>Initializing Repos...</h1>
        ) : (
          <Container style={{ padding: 10 }}>
            {!data ? (
              <div style={{ placeItems: 'center' }}>Loading...</div>
            ) : (
              <Grid container alignItems='center' spacing={4}>
                {data &&
                  data
                    .filter(data => {
                      if (formData.language === 'All') return true
                      return data.language === formData.language
                    })
                    .filter(data => {
                      if (formData.search === '') return true
                      return (data.name + data.language)
                        .toLowerCase()
                        .includes(formData.search.toLowerCase())
                    })
                    .map(user => <RepoCard key={user.id} user={user} />)}
              </Grid>
            )}
          </Container>
        )}
      </div>
    </>
  )
}
export default Profile

这里是下拉组件：

import React, { useRef } from "react"

// MUI stuff
import Select from "@material-ui/core/Select"
import InputLabel from "@material-ui/core/InputLabel"
import MenuItem from "@material-ui/core/MenuItem"
import FormControl from "@material-ui/core/FormControl"

const SelectStatus = ({ language, handleInputChange }) => {
  const inputLabel = useRef(null)

  return (
    <FormControl style={{ width: "100%" }}>
      <InputLabel ref={inputLabel} id='demo-simple-select-outlined-label'>
        Status
      </InputLabel>
      <Select
        labelId='demo-simple-select-outlined-label'
        id='demo-simple-select-outlined'
        value={language}
        onChange={handleInputChange("language")}
        fullWidth
      >
        <MenuItem value='All'>All</MenuItem>
        <MenuItem value='HTML'>HTML</MenuItem>
        <MenuItem value='JavaScript'>JavaScript</MenuItem>
        <MenuItem value='Ruby'>Ruby</MenuItem>
      </Select>
    </FormControl>
  )
}

export default SelectStatus

任何建议都会非常有帮助！！！

Answer 1

您可以只使用按钮并为其添加一个值，使其与下拉菜单完全相同

  const handleInputChange = field => e => {
    setFormData({ ...formData, [field]: e.target.value })
  }

  <Button onClick={handleInputChange('language')} value="All">All</Button>
  <Button onClick={handleInputChange('language')} value="HTML")>HTML</Button>
  <Button onClick={handleInputChange('Javascript')} value="Javascript">JavaScript</Button>
  <Button onClick={handleInputChange('Ruby')} value="Ruby">Ruby</Button>