there are two child components in a parent component, which are component A, component B. Component An is the name of a list of data, and component B is a data form formed by a single piece of data of component A. how to make component A re-render after modifying the data saved in component B, so that the data of component A can be updated again?
this is mainly a problem of communication between react sibling components. If the project is complicated, I think you can use redux to manage the data, and you can do so if you don't want to use redux,.
you can define a method in the parent component of AB and pass it to component B. For example, ask getLatestData, to modify and save the data in B and pass the updated data as a parameter to the getLatestData method. The parent component will get the updated data in the place defined by the getLatestData method, and component A like setState, will also re-render.
parent component? The communication mode of sub-components to solve your problem Demo
or use the third-party state management library (redux, mobx.)
Previous: Openresty ngx.re.find cannot uniquely match
Next: How to use php to implement an 8-bit encryption and decryption function for digits
...
I define an array in js. does anyone know, thank you ...
this is the effect ...
In Ant Design Input has textarea Select has multiple selection and tags mode but in Ant Design Pro, Select sets multiple selection mode has no effect I don t know why, did he do subtraction ...
1. Problem: when using antd s Modal.confirm, put an Input, to update the txNote property in state. But as long as there is a confirm, all you get is the previous state, instead of the updated state 2 entered in the confirm. Screenshot: 3. From...
step 1, in parent component: constructor(props) { super(props); this.state = { checkState: checked , enable:true } } this.setState({ checkState: unChecked , enable:false }) step 2: before calling the subcompon...
when I first come into contact with React and Antd, most of them use webpack to generate spa single-page applications and use routing to achieve multiple pages. this kind of application URL implementation is a page, and I want to develop that kind of n...
...
linux node 8.11 after the execution of the npm start project can run, but the file changes will not automatically compile the ant-design used ...
when antd tree sets defaultExpandAll to true, it expands by default the first time it is initialized. When the tree is collapsed, the window is closed and the window is opened again, the tree remains collapsed. Then I use expandedKeys to control the nod...
how to center the numbers in the picture as a whole, but each number is aligned to the right, that is, the percent sign ...
< H2 > Business scenario < H2 > A table, can be modified for each tr. The modification is to pop up a < Modal destroyOnClose modifyData= {data} > , and a Form in the Modal. Here, use setFieldsValue to backfill the form. Since Modal, is mounted ...
how to implement the parity line of the Table component the color is different after hover! Beg urgently! Thank you ...
when I initialize the Input component of the Form form, I set the initalValue property of getFieldDecorator . This initial value depends on the value stored in Redux , and the Redux value is the data passed in the background. the problem now i...
what if the input box is empty and the fieldsValue obtained is undifined, if it is not required? ...
as shown in the figure, I did not manually control the column width, and the result is like this, but I feel that even if the column width is fixed, then there will still be many rows if the data in < td > is too long. Is there any good way to deal with ...
in common scenarios in the background of administrators, the data is listed in table, paged and conditionally searched. previously made an admin that is written by react, so it doesn t matter if all the data are obtained asynchronously. but now you ne...
The default height of the Table list in antd is not good-looking. If you want to adjust the height, you will find that if there is too much content, it will not automatically wrap, the content will overlap, and adding the auto-wrapping attribute white-s...
input WrappedEditStoreForm ...
how to trigger an action in a child component through the parent component in the React. import {Modal} from antd <Modal visible={this.state.componentModalVisible} title="" onOk={this.handleOk} onCancel={this.handleCancel} ...