ReactJS功能不會被調用

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發送的功能 two到它返回一個輸入element.On輸入元素i給的onClick其中要求組分A的函數 one B成分並在控制檯中輸出。

所以我現在有兩種形式

一個作爲直接函數
其他作爲對象，其在給定的狀態[按對象屬性的屬性發送功能two組分B ]

在這兩種情況下按鈕被渲染，但輸入射擊的onClick只與第一種情況下，但不與第二我想在第二個情況下，這個工作也。

在此先感謝...幫助我走出

來源

2017-10-17 Abhishek

其實，最簡單的變化將是國家分配移動到你的構造函數的最後一行，原因很簡單，那再結合這一背景下會工作。

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強大，A應該是決定如何渲染B的那個。

也許你只是想傳遞一個無狀態的組件到你的類B中，它接收一個應該在類A上觸發的回調函數，它可以/應該通過傳遞道具來實現，而不是傳遞一個渲染另一個組件的方法。

所以，你可以創造的東西而不是像

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>

來源

2017-10-17 10:20:13 Icepickle

我已經試過了，但它不工作。可以請你在執行代碼片段並告訴我， – Abhishek

@Abhishek是的，對不起，我現在增加了修復程序以使你的應用程序正常工作，另一種方式獲得更大的靈活性你的工作 ;） – Icepickle

國家是異步的反應。您不能設置狀態並立即使用它。這也適用於初始狀態集。

來源

2017-10-17 10:44:04

ReactJS功能不會被調用

回答

相關問題