ReactJS機能はここ

Question

class A extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { obj: this.two } 
 
    this.one = this.one.bind(this); 
 
    this.two = this.two.bind(this); 
 
    } 
 

 
    one() { 
 
    console.log("Working...") 
 
    } 
 

 
    two() { 
 
    return <input type='submit' onClick={this.one} />; 
 
    } 
 

 
    render() { 
 
    return (
 
     <h1> 
 
      As Function:<B two={this.two} /> 
 
      As Object Property: <B two={this.state.obj} /> 
 
     </h1> 
 
    ) 
 
    } 
 
} 
 

 

 
class B extends React.Component { 
 
    render() { 
 
    return (
 
     <h1>{this.props.two()}</h1> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<A />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script> 
 
<div id='app'></div>

呼び出されていない私は、成分Aの機能 oneを呼び出す私はのonClickを与えている入力element.On入力要素を返し成分Bに成分Aから機能 twoを送信しようとしていコンソールで出力します。

だから今は、オブジェクトのプロパティとして[二つの形態の状態で与えられたオブジェクトのプロパティなどの他

• 直接関数として一
• 中の成分Bに機能twoを送信してい]どちらの場合もボタンで

がレンダリングされますが、入力のみ第一ケースとのonClickを発射さではなく、第二 と私はまた、第二の場合で、この作品を作りたいです。事前に

おかげで...私を助けて

Answer 1

実は、一番簡単なのは、このコンテキストに結合することを、単純な理由のために、あなたのコンストラクタの最後の行に状態割当てを移動するだろううまくいくでしょう。

class A extends React.Component { 
    constructor(props) { 
    super(props); 
    this.one = this.one.bind(this); 
    this.two = this.two.bind(this); 
    this.state = { obj: this.two }; 
    } 
    // ... rest stays as is 
} 

あなたが最初 stateを設定し、後にのみ結合コンテキストを変更し、その後 state.objはこれにバインドされ文脈ではありません。

これはあなたがそれを提示したときの問題に対する解決策になりますが、これが本当に欲しいのかどうかはわかりません。あなたのやり方で子コンポーネントを作成することに強くお勧めします。強力な方法、AはBのレンダリング方法を決めるべきです。

クラスBにトリガするコールバック関数を受け取るクラスBにステートレスコンポーネントを渡したい場合は、別のコンポーネントをレンダリングするメソッドを渡すのではなく、propsを渡すことによって達成できる/できなければならないことがあります。

だから、むしろ

const SubmitButton = ({ 
    trigger =() => {}, 
    text = "Submit" 
}) => <input type="Submit" onClick={trigger} value={text} />; 

のようなものを作成し、国家が反応における非同期である

const SubmitButton = ({ 
 
    trigger =() => {}, 
 
    text = "Submit" 
 
}) => <input type="Submit" onClick={trigger} value={text} />; 
 

 
class A extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { obj: this.one } 
 
    } 
 

 
    one() { 
 
    console.log("Working...") 
 
    } 
 

 
    two() { 
 
    return <input type='submit' onClick={this.one} />; 
 
    } 
 

 
    render() { 
 
    return (
 
     <h1> 
 
      <div>As Function:<SubmitButton trigger={() => this.one()} text="Submit Function" /></div> 
 
      <div>As Object Property: <SubmitButton trigger={() => this.state.obj()} text="Submit state" /></div> 
 
      <div>Through B function:<B itemTemplate={SubmitButton} trigger={() => this.one()} /></div> 
 
      <div>Through B state:<B itemTemplate={SubmitButton} trigger={() => this.state.obj()} /></div> 
 
     </h1> 
 
    ) 
 
    } 
 
} 
 

 
class B extends React.Component { 
 
    render() { 
 
    const Template = this.props.itemTemplate; 
 
    return <h1><Template {...this.props} /></h1>; 
 
    } 
 
} 
 

 
ReactDOM.render(<A />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script> 
 
<div id='app'></div>

Answer 2

この例のようにそれを使用することができます。状態を設定してすぐに消費することはできません。これは初期状態にも適用されます。