[英]How to clear TextField of Materal ui
I have created a form with material ui, and I would like to clear it. 我用材料ui创建了一个表单,我想清除它。 I have searched for answers/solutions across Stackoverflow but all of them are not working for me. 我已经在Stackoverflow上搜索了答案/解决方案,但所有这些都不适合我。
I have tried by using setstate
but it not result to clear the form. 我已尝试使用setstate
但不会导致清除表单。
I want to know how to do this using onclick
event of the button. 我想知道如何使用按钮的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;
Inside the TextField
set a value
, 在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);
}}
/>
Then when you want to clear it, just use setState
然后,当您想要清除它时,只需使用setState
this.setState({ first_name: '' })
Edit: 编辑:
In fact, you can delete defaultValue
as the default is an empty string anyways, which is what you're using. 实际上,你可以删除defaultValue
因为默认情况下是一个空字符串,这就是你正在使用的。
<TextField
value={this.state.first_name}
variant="outlined"
label="First Name"
onKeyUp={(e) => {
this.handle_input("first_name", e.target.value);
}}
/>
It may be worth reading the react docs , basically you're wanting to override the form's internal state, which you do by using the value
prop 可能值得阅读反应文档 ,基本上你想要覆盖表单的内部状态,你通过使用value
prop来做
I dont know if this will help as I am pretty new to react myself but you could try making a functional component instead of a class to help reduce the amount of code you need, i would do something like this 我不知道这是否会有所帮助,因为我很自我反应,但你可以尝试制作一个功能组件而不是一个类来帮助减少你需要的代码量,我会做这样的事情
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()}}
Look into writing components like this its quite nice. 看看写这样的组件非常好。 Again this will need tweaking but may be a point in the right direction. 这将需要调整,但可能是正确方向的一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.