Question

我在我的应用中添加了React-Bootstrap。所以我用React-Bootstrap组件更改了一个基本表单。

我无法在提交后重置表单。

这是我的简化代码：

with open('data.json') as f:
    data = json.load(f)

我可以继续使用法线然后它可以工作，但我想知道如何使用React-Boostrap的那个组件。

有人有想法吗？

错误：

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;

当我记录this.messageForm时，它是一个React-Bootstrap组件。我还使用× TypeError: this.messageForm.reset is not a function代替inputRef进行了测试，但它不起作用

Answer 1

顺便提一下，我建议最简单的方法就是使用简单的<form>代替React-Bootrasp <Form>。然后this.messageForm.reset()效果很好。

但是如果由于某些原因你需要使用Bootstrap Form组件，请在表单中添加一个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();

Answer 2

使用https://redux-form.com/管理您的输入字段。

通过这种方式，您可以对表单字段进行更多控制。

https://codesandbox.io/s/7m0m386m26

如何在提交后重置React-Bootstrap表单？

2 个答案: