Question

我有两个组件，一个是应用程序组件，另一个是侧栏组件，我一直在侧栏使用输入字段，我想在我的应用程序组件中获取该输入字段的值，点击这是如何实现的？< / p>

Answer 1

创建一个包含两个组件的新组件。在该新组件中，创建一个您将在侧边栏组件中作为props传递的函数。

class ContainerComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            valueThatNeedsToBeShared: '' 
        }
    }

    handleChange(e) {
        this.setState({valueThatNeedsToBeShared: e.target.value})
    }

    render() {
        return (
            <div>
                <AppComponent value={this.state.valueThatNeedsToBeShared} />
                <SidebarComponent handleChange={this.handleClick.bind(this)} value={this.state.valueThatNeedsToBeShared} />
            </div>
        )
    }
}

const SidebarComponent = ({handleChange, value}) => <aside>
    <input value={value} onChange={handleChange} />
</aside>

const AppComponent = ({value}) => <div>
    value from sidebar: {value}
</div>

Answer 2

在纯粹的反应中，可以通过从一个组件添加回调并将其用于父组件来更改其状态，然后将父状态的输入值发送到第二个组件的道具

获取另一个组件输入值React js

2 个答案: