移交功能onClick點擊具有參數的道具

我把一些HTML代碼封裝到了一個額外的類中，並且現在想把一個函數交給它。移交功能onClick點擊具有參數的道具

父類看起來是這樣的：

class Home extends React.Component { 

    doSomething = id => { 
    console.log(id); 
    // here are some fetch operations only available in Home component 
    }; 

    render() { 
    return (
    <Child doSomething={() => this.doSomething} /> 
) 
    } 
}

然後我的孩子組成是這樣的：

const id = 3; 
const Child = ({doSomething}) => 
(

    <Button onClick={doSomething(id)}>Click</Button> 
); 
export default Child

我用不同的解決方案，試圖左右，但無論是我沒有得到任何結果或的onClick功能在Home組件被渲染時被調用，而不是在單擊按鈕時被調用。我想單擊按鈕時執行該功能。並且id參數也應該被移交。我不能在Child組件中使用這個函數，因爲我必須使用它在子類中不可用的一些redux動作。

我知道這是不是太困難的問題，但我還是用JavaScript一個小白..

編輯：我完成有我的函數內部的事件參數，但我不知道如何使用它訪問ID。我不能簡單地將一個道具添加到Button元素，因爲它不允許。

預先感謝您的幫助，

埃裏克

來源

2017-04-03 Codehai

你需要在構造函數結合的方法，並把它傳遞給子組件

class Home extends React.Component { 

    constructor() { 
    this.doSomething = this.doSomething.bind(this); 
    } 

    doSomething(id) { 
    console.log(id); 
    // here are some fetch operations only available in Home component 
    } 

    render() { 
    return <Child doSomething={this.doSomething} /> 
    } 
}

而且在Child

const Child = ({doSomething}) => 
(

    <Button onClick={() => doSomething(id)}>Click</Button> 
)

來源

2017-04-03 14:17:54

這個工作與我的代碼應該非常感謝你！ – Codehai

我認爲你需要這樣的：

this.doSomething.bind(this);

它綁定了this作爲函數的第一個參數，當您將類方法作爲參考傳遞時，它是需要的。在子組件中調用doSomething時，this將引用父組件。

來源

2017-04-03 14:20:37 nagyf

首先，在Home組件使用箭頭功能doSomething道具保持正確的上下文（或者你可以在組件構造函數中使用bind）：

class Home extends React.Component { 
    doSomething(id) { 
    console.log(id); 
    // here are some fetch operations only available in Home component 
    } 

    render() { 
     <Child doSomething={() => this.doSomething()} /> 
    } 
}

，然後使用將調用傳遞函數與給定值箭頭功能作爲子組件中的點擊處理程序：

<Button onClick={() => doSomething(id)}>Click</Button>

來源

2017-04-03 14:21:08

首先，您的jsx是錯誤的。你缺少

render() { 
    return ...; 
}

沒有有效的JSX Button

<Button onClick={doSomething(id)}>Click</Button>，使用<button>標籤來代替。

這裏是工作示例。

const element = <h1>Hello, world</h1>; 
 

 
class Home extends React.Component { 
 

 
    doSomething = id => { 
 
    console.log(id); 
 
    // here are some fetch operations only available in Home component 
 
    }; 
 

 
    render() { 
 
    return <Child doSomething={() => this.doSomething('do something input')} />; 
 
    
 
    } 
 
} 
 

 

 
class Child extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    
 
    //console.log(props); 
 
    } 
 

 
    
 
    render() { 
 
    return <button onClick={this.props.doSomething.bind(this)}>Click</button>; 
 
    } 
 
} 
 

 

 
ReactDOM.render(
 
    <Home />, 
 
    document.getElementById('root') 
 
);

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

 

 

 

 
<div id="root"></div>

來源

2017-04-03 14:21:09 loelsonk

謝謝我忘了在我最小的例子中添加它，我添加了回覆聲明以避免讓其他人感到困惑 – Codehai

很高興我能幫忙，歡呼。 – loelsonk

你可能需要通過ID時，您所定義的脂肪箭頭功能

class Home extends React.Component { 

    doSomething(id) { 
    console.log(id); 
    } 

    render() { 
    return <Child doSomething={(id) => this.doSomething(id)} /> 
    } 
}

來源

2017-04-03 14:21:28 Smilev

移交功能onClick點擊具有參數的道具

回答

相關問題