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

我有两个组件，一个是应用程序组件，另一个是侧栏组件，我一直在使用侧栏中的输入字段，我想在应用程序组件中获取该输入字段的值这怎么可能？获取另一个组件的输入值React js

来源

2017-04-02 Zohaib Ahmad

on click in textfield or when click on AppComponent？ – mfahadi

是App组件的补充工具栏子组件吗？ –

我有侧边栏组件中的小表单想要获取输入字段的值，这是在应用程序组件中的单击事件中的形式，我不希望您使用更改事件 –

在纯反应可以通过从一个组件添加回调，并用它为母公司组件来改变自己的状态，然后从父母的发送状态输入值，以你的第二个组件

来源

2017-04-02 13:46:26 AlexeyKuznetsov

您是否有任何示例？。我确实使用了稍微不同的方式在应用程序组件中定义funtion，并在应用程序组件中的边栏组件中触发。我可以通过refs或documetn.getelment通过id将id置于输入框中的输入字段中，该输入框位于边栏组件 –

下一个答案，这里是 – AlexeyKuznetsov

的道具你可以试试lifting the state up。

创建一个包含您的两个组件的新组件。在该新组件中，创建一个功能，您将在侧边栏组件中以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>

来源

2017-04-02 13:55:07 oobgam

我不想在输入框上使用onchange事件 –

请解释一下，为什么？ – AlexeyKuznetsov

Worked me me ...如果我想从多个字段（如用户名/密码）获取数据，该怎么办？ – Omer

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

回答

相关问题