gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 02:48:33 25 4
gpt4 key购买 nike

当我调用 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>
);
}
}

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

最佳答案

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

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

关于reactjs - React-bootstrap - Form.Control defaultValue 重新渲染时未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62412307/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com