通过在父组件中创建一个句柄,可以将数据从一个组件传递到另一个组件。以下是一个示例代码:
父组件:
import React, { Component } from 'react'; import ChildComponent from './ChildComponent';
class ParentComponent extends Component { constructor(props) { super(props);
this.state = {
data: ''
}
this.handleData = this.handleData.bind(this);
};
handleData(data) { this.setState({ data: data }); }
render() { return (
Data: {this.state.data}
export default ParentComponent;
在父组件中,我们创建了一个名为handleData的句柄,并将其通过props传递给子组件。在子吸入中,我们将handleData绑定到一个按钮上,并在点击按钮时传递数据。
子组件:
import React, { Component } from 'react';
class ChildComponent extends Component { constructor(props) { super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
const data = 'Data from child component';
this.props.onData(data);
}
render() {
return (
);
}
}
export default ChildComponent;
这样,当我们点击按钮时,数据就会通过handleData句柄传递给父组件,并在父组件中更新状态。最后,我们可以在父组件中渲染数据。
下一篇:按钮无法显示与其连接的框架