Reactで親にデータを渡す

Question

私はReactと新しい質問に新しいです。 私は、親Component - 子Component-SideBarを持つHomePageを持っています。

私の子コンポーネントのサイドバーは、親がAPIに投稿する必要がある送信ボタンのクリックで親にデータを戻す必要があります。

この私の親コンポーネントは、

class HomePage extends React.Component{ 

    constructor(props) { 
    ....... 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 
    handleSubmit(){ 
    //Logic to get the data from the child and post to localhost:8080/ 
    } 
    render(){ 
    return(

     <div className="col-md-2 left-pane"> 
      <Sidebar handleSubmitButton={this.state.handleSubmit}/> 
     </div> 

    ); 
    } 

} 

これは私の子コンポーネントである、

class Sidebar extends React.Component { 

    handleSubmitButton(event) { 
    event.preventDefault(); 

    } 

    render() { 
    return (
     <div> 

      <input type="text"/> 

      <button type="button" className="btn btn-info btn-icons" onClick={this.props.handleSubmitButton} > 
       <span className="glyphicon glyphicon-send" aria-hidden="true"/> 
      </button> 


     </div> 
    ); 

    } 
} 

Sidebar.propTypes = { 
    handleSubmitButton: React.PropTypes.func 
}; 

私の質問は、私はサイドバーのボタンをクリックし、パス上のonclickの方法で入力されたテキストをつかむ行う方法です親にそれをapiに投稿する。どんな助けもありがたい。

Answer 1

子コンポーネントでは、ref属性のプロパティを作成できます。 DOM要素に直接アクセスするには、通常、refを設定します。

あなたは、単に参照文献についての詳しい情報はで見つけることができthis.textInput

を入力して、あなたの親コンポーネント内のどこにでも<input> DOM要素にアクセスすることを可能にするコールバックと矢印機能を使用することができ、あなたの親コンポーネントで

https://facebook.github.io/react/docs/refs-and-the-dom.html

親コンポーネント：

handleSubmit() { 
    console.log(this.textInput.value); 
} 

<Sidebar 
    inputRef={(input) => this.textInput = input} 
    handleSubmitButton={this.state.handleSubmit} 
/> 

子コンポーネント：

01公式にはドキュメントに反応します

<input ref={this.props.inputRef} type="text"/> 

Answer 2

あなたはそれについて行くことができるいくつかの方法があります。 1つは、入力にonChangeイベントを追加して、サイドバーコンポーネントの状態を更新することです。次に、サブミットハンドラがクリックされると、stateから値を渡し、HomePageのhandleSubmit（）が値を受け入れるようにします。

もう1つは、HomePageコンポーネントからonChange propをサイドバーに渡すことです。入力は、その変化をonChangeに設定します。

Answer 3

親コンポーネントは入力に直接アクセスするのではなく、必要に応じて親コンポーネントに値を渡すために子コンポーネントに依存する必要があります。

class HomePage extends React.Component { 

    constructor(props) { 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit(textInputValue){ 
    // The callback passed to the child component will 
    // submit the data back to it's parent. 
    // Logic to post to localhost:8080/ 
    } 

    render(){ 
    return(
     <div className="col-md-2 left-pane"> 
     <Sidebar handleSubmitButton={ this.handleSubmit }/> 
     </div> 
    ); 
    } 
} 

class Sidebar extends React.Component { 

    constructor(props) { 
    this.handleSubmitButton = this.handleSubmitButton.bind(this); 
    } 

    handleSubmitButton(event) { 
    event.preventDefault(); 

    // By giving the input the `ref` attribute, we can access it anywhere 
    const textInputValue = this.refs.input.value; 

    // Submit the value to the parent component 
    this.props.handleSubmitButton(textInputValue); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" ref="input" /> 

     <button type="button" className="..." onClick={this.handleSubmitButton} > 
      <span className="glyphicon glyphicon-send" aria-hidden="true"/> 
     </button> 
     </div> 
    ); 
    } 
} 

これにより、コンポーネントの結合が防止され、後でテストが容易になります。