javascript - 如何为刷新组件进行 React 重置
问题描述
我想重置以刷新我的输入状态。我在网上测试了 13 这个:this.messageForm.reset()
但是我得到的错误不是函数
import React, {Component} from 'react'
import {Form, Button} from 'reactstrap'
export default class Formulaire extends Component {
createMessage = event => {
event.preventDefault()
console.log(this.message.value)
const message = this.message.value
this.props.addMessage(message)
//reset
this.messageForm.reset()
}
render() {
return (
<div>
<Form
className='form'
onSubmit={event =>this.createMessage(event)}
ref={input => this.messageForm = input}
>
<textarea
required
maxLength='140'
ref={input => this.message = input}
>
</textarea>
<Button type="submit"> Envoyer! </Button>
</Form>
</div>
)
}
}
解决方案
问题是您<Form>
的不是 HTML 表单元素,而是reactstrap 表单组件,因此它没有.reset()
方法。
Reactstrap 允许设置innerRef
prop 以访问实际的 DOM 元素:
<Form
className='form'
onSubmit={event =>this.createMessage(event)}
innerRef={input => this.messageForm = input}
>
推荐阅读
- google-maps - 谷歌地图的按钮链接在 Chrome 上不起作用
- angular - 使用 ngModel 处理模型更改
- mysql - 将mysql ddl和表数据导出到aws redshift的最佳方法是什么?
- c - 如何修复'第 1 行:语法错误:单词意外(期望“)”)'
- javascript - 保持身份验证状态 Firebase + Chrome 扩展
- javascript - 在 dom 元素上读取 css 转换矩阵会给出相互冲突的值
- javascript - exit().remove() 不在视野范围内时不会删除节点
- python - 如何更改 pandas df 中的日期时间值?
- c# - 如何在列表中存储、排序整数(来自用户的输入)?
- android - 如何以编程方式相对于 ConstraintLayout 中的另一个视图设置视图的宽度/边距