Question

我用材料ui创建了一个表单，我想清除它。我已经在Stackoverflow上搜索了答案/解决方案，但它们都不对我有用。

我已经尝试过使用setstate，但无法清除表格。

我想知道如何使用按钮的onclick事件来做到这一点。

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;

Answer 1

在TextField内设置一个value，

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

然后，当您要清除它时，只需使用setState

this.setState({ first_name: '' })

编辑：

实际上，您可以删除defaultValue，因为无论如何默认值是一个空字符串。

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

可能值得一读the react docs，基本上，您想使用value道具来覆盖表单的内部状态

Answer 2

我不知道这是否会有所帮助，因为我是一个很新的反应者，但是您可以尝试制作一个功能组件而不是一个类来帮助减少所需的代码量，我会这样做

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()}}

研究这样的组件非常好。再次需要调整，但可能是正确方向上的一点。

如何清除Materal UI的TextField

2 个答案: