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

【问题标题】：Get another component input value React js获取另一个组件输入值 React js
【发布时间】：2017-04-02 13:39:05
【问题描述】：

我有两个组件，一个是应用组件，另一个是侧边栏组件/p>

【问题讨论】：

点击文本字段或点击 AppComponent 时？
是 App 组件的 Sidebar 子项吗？
我在侧边栏组件中有一个小表单想要在点击事件中获取应用程序组件中该表单中输入字段的值，我不希望您在更改事件中使用
侧边栏不是子组件

【解决方案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>

【讨论】：

我不想在输入框上使用onchange事件
请解释一下，为什么？
为我工作...如果我想从多个字段（如用户名/密码）获取数据怎么办？

【解决方案2】：

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

【讨论】：

你有什么例子吗？ .我确实使用了稍微不同的方式在应用程序组件中定义功能并在应用程序组件的侧边栏组件中触发我可以通过 refs 或 documetn.getelment 通过 id 将 id 放在侧边栏组件中的输入框中的输入字段上
看看下一个答案，这里是