Javascript 如何清除物料界面的文本字段

我已经创建了一个带有材质ui的表单，我想清除它。我已经在Stackoverflow中搜索了答案/解决方案，但它们都不适合我

我尝试过使用

setstate

，但没有清除表单

我想知道如何使用按钮的

onclick

event执行此操作

import React, { Component } from "react";
import {
Grid,
TextField,
AppBar,
Typography,
Toolbar,
Button
} from "@material-ui/core";

export class MyInput extends Component {
constructor(props) {
    super(props);
    this.state = {
        first_name: "",
        last_name: ""
    };
}
handle_input = (name, value) => {
    let cur_state = this.state;
    cur_state[name] = value;
    this.setState(cur_state);
};
render() {
    return (
        <Grid container justify="center">
            <Grid item md={4}>
                <TextField
                    defaultValue={this.state.first_name}
                    variant="outlined"
                    label="First Name"
                    onKeyUp={(e) => {
                        this.handle_input("first_name", e.target.value);
                    }}
                />
            </Grid>
            <Grid item md={4}>
                <TextField
                    defaultValue={this.state.last_name}
                        variant="outlined"
                    label="Last Name"
                        onKeyUp={(e) => {
                            this.handle_input("last_name", e 
  .target.value);
                        }}
                    />
                </Grid>
                <Grid item md={4}>
                    <div
                        style={{
                        width: "100%",
                            padding: "10px",
                            display: "flex",
                            justifyContent: "space-between"


                        }}
                    >
                        <Button color="primary" variant="contained">
                            save
                        </Button>
                        <Button
                            color="secondary"
                            variant="contained"
                            onClick={() => {
                                this.setState({
                                    first_name: "",
                                    last_name: ""
                                });
                            }}
                        >
                            cancel
                        </Button>
                    </div>
                </Grid>
            </Grid>
        );
    }
}

export default MyInput;

import React，{Component}来自“React”；
进口{
网格，
TextField，
阿帕巴，
排版，
工具栏，
按钮
}来自“@材料界面/核心”；
导出类MyInput扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名字：“，
姓氏：“
};
}
句柄\输入=（名称、值）=>{
设cur_state=this.state；
cur_state[名称]=值；
此设置状态（当前状态）；
};
render（）{
返回(
{
这个.handle\u输入（“first\u name”，即target.value）；
}}
/>
{
这个。处理输入（“姓氏”，e
（目标、价值）；
}}
/>
拯救
{
这是我的国家({
名字：“，
姓氏：“
});
}}
>
取消
);
}
}
导出默认MyInput；

在

文本字段中

设置一个

值

           <TextField
                value={this.state.first_name}
                defaultValue={this.state.first_name}
                variant="outlined"
                label="First Name"
                onKeyUp={(e) => {
                    this.handle_input("first_name", e.target.value);
                }}
            />

编辑：

事实上，您可以删除

defaultValue

，因为默认值是一个空字符串，这就是您正在使用的

       <TextField
            value={this.state.first_name}
            variant="outlined"
            label="First Name"
            onKeyUp={(e) => {
                this.handle_input("first_name", e.target.value);
            }}
        />

{
这个.handle\u输入（“first\u name”，即target.value）；
}}
/>

---

这可能值得一读，基本上你想覆盖表单的内部状态，你可以使用

值
道具我不知道这是否有帮助，因为我对自己的反应还很陌生，但你可以尝试制作一个函数组件而不是类来帮助减少你需要的代码量，我会这样做

import React, {useState} from "react";

export default function MyInput(props) {
    const [myState, setMyState] = useState(props);

    function clearState() {
        setMyState.first_name("")
        setMyState.last_name("")
    }

    return (
            //Your grid code here
        )

//set your button on click to this
    onClick = {() => {clearState()}}

考虑编写这样的组件，这非常好。同样，这需要调整，但可能是一个方向正确的点。
这不起作用，我已经尝试了答案。当事件设置为onInput时，它正在工作。
import React, {useState} from "react";

export default function MyInput(props) {
    const [myState, setMyState] = useState(props);

    function clearState() {
        setMyState.first_name("")
        setMyState.last_name("")
    }

    return (
            //Your grid code here
        )

//set your button on click to this
    onClick = {() => {clearState()}}