如何在提交后重置Reaction-Bootstrap表单？ [英] How to reset a React-Bootstrap Form after submit?

问题描述

我在应用程序中添加了Reaction-Bootstrap。因此，我使用Reaction-Bootstrap组件更改了一个基本表单。

提交后无法重置表单。

以下是我的简化代码：

import React from 'react';
import { Form, FormGroup, FormControl, ControlLabel, Button } from 'react-bootstrap';

class MyForm extends React.Component {

    onSubmit( event ) {
        event.preventDefault();
        const textAreaValue = this.textArea.value;
        console.log("textAreaValue : ", textAreaValue);


        // some code here...

        // ERROR HERE (but it works if I 
        // replace bootstrap <Form> 
        // component by a simple <form>
        this.messageForm.reset();
    }

    render() {

        return (
            <Form
                className="form"
                ref={ form => this.messageForm = form }
                onSubmit={ this.onSubmit.bind( this ) }
            >

                <FormGroup controlId="formControlsTextarea">
                    <ControlLabel>My Control Label</ControlLabel>
                    <FormControl
                        required
                        inputRef={ input => this.textArea = input }
                        componentClass="textarea" />
                </FormGroup>

                <Button type="submit">ok</Button>
            </Form>
        );

    }

}
export default MyForm;

我可以继续使用Normal，然后它就可以工作了，但我想知道如何使用Reaction-Boostrap的那个组件。

有人有主意吗？

---

错误：

× TypeError: this.messageForm.reset is not a function

当我记录这个.MessageForm时，它是一个Reaction-Bootstrap组件。我也使用inputRef而不是ref进行了测试，但它不起作用

推荐答案

顺便提一句，我建议最简单的方法是使用Simple<form>而不是Reaction-Bootstrap<Form>。然后this.messageForm.reset()工作正常。

但如果出于某些原因需要使用Bootstrap表单组件，请按如下方式向表单添加id：

        <Form
            id='myForm'
            className="form"
            ref={ form => this.messageForm = form }
            onSubmit={ this.onSubmit.bind( this ) }>
            ...
        </Form>

，在onSubmit方法中，访问React-Bootstrap创建的表单元素，如下所示：

ReactDOM.findDOMNode(this.messageForm).reset();

这篇关于如何在提交后重置Reaction-Bootstrap表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！