如何使用按钮清除 material-ui 搜索输入

Question

正在制作一个涉及反应 material-ui tables 的教程 atm，它也有一个搜索输入文本字段。我想添加的是一个按钮，它将重置 table 报告，但也会清除搜索输入文本字段。

我遇到的问题是清除搜索文本字段。

他们将此代码用作名为 Controls.input:

的单独组件库

从 'react' 导入 React 从“@material-ui/core”导入 {TextField}；

export default function Input(props) {

    const { name, label, value,error=null, onChange, ...other } = props;
    return (
        <TextField
            variant="outlined"
            label={label}
            name={name}
            value={value}
            onChange={onChange}
            {...other}
            {...(error && {error:true,helperText:error})}
        />
    )
}

主要的搜索代码如下，我也添加了一个按钮

            <Controls.Input
                id="name"
                label="Search Name"
                className={classes.searchInput}
                InputProps={{
                    startAdornment: (<InputAdornment position="start">
                        <Search />
                    </InputAdornment>)
                }}
                onChange={handleSearch}
            />
            <Button
                onClick={handleClear}
                className="materialBtn"
            >
                Clear
            </Button>

此时，我不确定如何 reference/target 搜索输入字段作为 handleClear 功能的一部分，以便清除其内容？

const handleClear = () => {
    ????
}

我需要使用 useState() 吗？

Answer 1

您必须将值放入状态，这是正确的。根据您提供的内容，您的状态似乎需要在您的父组件中。所以像这样的东西应该可以工作

import { useState } from 'react'

const ParentComponent = () => {
    const [value, setValue] = useState('')

    const handleClear = () => {
        setValue('')
    }

    const handleSearch = (event) => {
        setValue(event.target.value)
    }

    return (
        <>
            <Controls.Input
                id="name"
                label="Search Name"
                className={classes.searchInput}
                value={value}
                onChange={handleSearch}
                InputProps={{
                    startAdornment: (
                        <InputAdornment position="start">
                            <Search />
                        </InputAdornment>
                    ),
                }}
                
            />
            <Button onClick={handleClear} className="materialBtn">
                Clear
            </Button>
        </>
    )
}

如何使用按钮清除 material-ui 搜索输入

How to clear a material-ui search input using a button

javascript

reactjs

material-ui

use-state