javascript - 一次清除所有表单字段,reactjs
问题描述
我想在单击表单中的重置按钮时清除所有字段。我怎样才能使用状态来做到这一点?我正在使用材质 ui 主题。我不想单独设置状态。那可能吗?
<form className={classes.form}>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="Name">Name</InputLabel>
<Input id="name" name="name" autoComplete="name" autoFocus />
</FormControl>
<div className ='switchdesign'>
<FormControlLabel required
label="Private ? "
labelPlacement="start"
control={
<Switch
checked={this.state.checkedA}
onChange={this.handleChange('checkedA')}
value="checkedA" />
} />
</div>
<div className ='switchdesign'>
<FormControl className={classes.formControl}>
<Select
labelPlacement="start"
value={this.state.age}
onChange={this.onhandleChange}
name="tenant"
displayEmpty
className={classes.selectEmpty}
>
<MenuItem value="" disabled>
Choose Option
</MenuItem>
<MenuItem value="a">A</MenuItem>
<MenuItem value="b">B</MenuItem>
<MenuItem value="c">C</MenuItem>
</Select>
<FormHelperText>Tenant</FormHelperText>
</FormControl>
</div>
<Button
type="reset"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Reset
</Button>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Submit
</Button>
</form>
我需要强制使用 refs 吗?这是更好的方法吗?还是使用状态更好?
解决方案
您可以通过将初始状态设置为变量然后像这样重置它来做到这一点
class MyComponent extends Component {
static initialState = {
// your object state
}
constructor(props) {
super(props)
//set your state here when init component
this.state = {
}
}
resetForm() {
this.setState(initialState)
}
}
让我知道您是否仍有问题
推荐阅读
- jenkins - Jenkins:我如何从 SCM 的流水线脚本访问通用 Webhook 触发器参数
- javascript - 交叉口观察者未检测到微小的视口调整
- android - UnityPlayerActivity 使用或覆盖已弃用的 API
- api - 在 REST API 设计中以多种方式处理集合项
- java - JavaFX SwingNode中的Java 2d绘画问题
- java - SpringBoot 2.2.2.RELEASE 中的 IntegrationTest 和 SpringApplicationConfiguration
- android - 为什么我的抽屉在我身后?[扑]
- swift - 如何解决转义闭包捕获 Swift 中的“inout”参数?
- xml - 在 CHOOSE/IF 语句 XSLT 中使用带有 CDATA 标记的值
- google-bigquery - 使用子句时计算 distint