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}
footer={[
<Button key="back" onClick={this.handleCancel}></Button>,
<Button key="submit" type="primary" onClick={this.handleOk}></Button>
]}>
<Child /> // ``state
</Modal>the parent component can only get the state, of the child component through the callback function, for example:
getData = (data)=>{
console.log('data',data)
}
<child getData={this.getData} />
// child
onClick={()=>{
const data = this.state.data;
this.props.getData(data);
}} the parent component can be dropped from the component using ref.
for example:
//
<Modal
visible={this.state.componentModalVisible}
title=""
onOk={this.ref.child.handleClick}
onCancel={this.handleCancel}
footer={[
<Button key="back" onClick={this.handleCancel}></Button>,
<Button key="submit" type="primary" onClick={this.handleOk}></Button>
]}>
<Child ref={(c)=>{this.child=c}} /> // ``state
</Modal>
//
handleClick(){
//...
}since the save button is in the parent component, why not all the information to be saved and the methods used also exist in the parent component? Then the this in the parent component is passed to the child component, and the child component can get the data or change the data through the props.
< Child parent= {this} / > / here the this of the parent component is passed to the child component;
/ / the child component passes through
this.props.parent.state. Parent component data; / get parent component data
this.props.parent.setState ({parent component data: new data}); / / change parent component data
this.props.parent. Parent component method; / / call parent component method
...
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...
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 ...
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 ...