react-bootstrap - Form.Control defaultValue 重新渲染时未更新

Question

当我调用setState并且我的表单被重新呈现时，文本输入的值不会改变。

import React, { Component } from 'react';
import { Button, Col, Form, Row } from 'react-bootstrap';

export default class Test extends Component {

    constructor(props) {
        super(props);
        this.state = {
            status: "new"
        }
    }

    approve = (e) => {
        this.setState({
            status: "I'm newer than you!"
        });
        e.preventDefault();
    }

    render() {
        return (
            <div>
                Status is {this.state.status}
                <Form onSubmit={this.approve}>
                    <Form.Group as={Row} controlId="status">
                        <Form.Label column >Status</Form.Label>
                        <Col>
                            <Form.Control readOnly type="text" size="sm" defaultValue={this.state.status} />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row}>
                        <Button type="submit">approve</Button>
                    </Form.Group>
                </Form>
            </div>
        );
    }
}

当我单击按钮时，我看到 static 文本（“状态为...”）得到更新，但输入字段没有。 我是否错误地认为文本输入应该更新？

Answer 1

如果要更改它，可以在 FormControl 组件中将 'defaultValue' 替换为 'value'。

<Form.Control readOnly type="text" size="sm" value={this.state.status} />