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

Когда я нажимаю на кнопку, я вижу статус c текст ("Статус ...") обновляется, а поле ввода - нет. Я ошибочно предположил, что ввод текста должен обновляться?

Answer 1

Если вы хотите изменить его, вы можете заменить defaultValue на value в компоненте FormControl.

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