移交功能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元素，因为它不允许。

预先感谢您的帮助，

埃里克

答

你需要在构造函数结合的方法，并把它传递给子组件

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> 
)

这个工作与我的代码应该非常感谢你！ – Codehai

答

我认为你需要这样的：

this.doSomething.bind(this);

它绑定了this作为函数的第一个参数，当您将类方法作为参考传递时，它是需要的。在子组件中调用doSomething时，this将引用父组件。

答

首先，在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>

答

首先，您的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>

谢谢我忘了在我最小的例子中添加它，我添加了回复声明以避免让其他人感到困惑 – Codehai

很高兴我能帮忙，欢呼。 – loelsonk

答

你可能需要通过ID时，您所定义的脂肪箭头功能

class Home extends React.Component { 

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

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

移交功能onClick点击具有参数的道具

相关推荐