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>
        );
    }
}

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

Answer 1

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

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