Javascript 切换功能，使用参数单击道具

我将一些HTML代码封装到一个额外的类中，现在想将一个函数交给它

父类如下所示：

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

this.doSomething.bind(this);

class Home扩展了React.Component{
doSomething=id=>{
console.log（id）；
//以下是一些仅在Home组件中可用的获取操作
};
render（）{
返回(
这个.doSomething}/>
)
}
}

我的子组件如下所示：

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

this.doSomething.bind(this);

const id=3；
常量Child=（{doSomething}）=>
(
点击
);
导出默认子对象

我尝试了不同的解决方案，但要么没有结果，要么在渲染主组件而不是单击按钮时调用onClick函数。 我希望在单击按钮时执行该函数。id参数也应该移交。我不能在子组件本身中使用该函数，因为我必须在其中使用一些在子类中不可用的redux操作

我知道这不是一个太难的问题，但我还是一个JavaScript高手

编辑：我在函数中完成了事件参数，但我想知道如何使用它访问id。我不能简单地向按钮元素添加道具，因为它不允许这样做

提前感谢您的帮助

---

Erik

您需要在构造函数中绑定方法并将其传递给子组件

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} />
  }
}

---

您需要在构造函数中绑定方法并将其传递给子组件

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} />
  }
}

---

我想你需要这样的东西：

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

this.doSomething.bind(this);

---

它将

此

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

doSomething

时，此

将引用父组件。
我认为您需要这样的内容：

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

this.doSomething.bind(this);

它将
此
绑定为函数的第一个参数，当您将类方法作为引用传递时，需要该参数。当在子组件中调用
doSomething
时，此
将引用父组件。
首先，在
Home
组件中，使用箭头函数作为
doSomething
属性来保留正确的上下文（或者，您可以在组件构造函数中使用
bind
）：

class Home扩展了React.Component{
剂量测定法（id）{
console.log（id）；
//以下是一些仅在Home组件中可用的获取操作
}
render（）{
this.doSomething（）}/>
}
}

然后使用arrow函数，该函数将调用具有给定值的传递函数作为子组件中的单击处理程序：

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

doSomething（id）}>单击
首先，在
Home
组件中，使用箭头函数作为
doSomething
道具来保存正确的上下文（或者，您可以在组件构造函数中使用
bind
）：

class Home扩展了React.Component{
剂量测定法（id）{
console.log（id）；
//以下是一些仅在Home组件中可用的获取操作
}
render（）{
this.doSomething（）}/>
}
}

然后使用arrow函数，该函数将调用具有给定值的传递函数作为子组件中的单击处理程序：

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

doSomething（id）}>单击
首先，您的jsx是错误的。你的名字不见了

render() {
  return ...;
}

没有有效的JSX
按钮

单击
，
改用
标记

下面是一个工作示例


const元素=你好，世界；
类Home扩展了React.Component{
doSomething=id=>{
console.log（id）；
//以下是一些仅在Home组件中可用的获取操作
};
render（）{
返回此.doSomething（'do something input'）}/>；
}
}
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
//控制台日志（道具）；
}
render（）{
返回单击；
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
首先，您的jsx是错误的。你的名字不见了

render() {
  return ...;
}

没有有效的JSX
按钮

单击
，
改用
标记

下面是一个工作示例


const元素=你好，世界；
类Home扩展了React.Component{
doSomething=id=>{
console.log（id）；
//以下是一些仅在Home组件中可用的获取操作
};
render（）{
返回此.doSomething（'do something input'）}/>；
}
}
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
//控制台日志（道具）；
}
render（）{
返回单击；
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
定义fat arrow函数时，可能需要传递id

class Home extends React.Component {

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

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

class Home扩展了React.Component{
剂量测定法（id）{
console.log（id）；
}
render（）{
返回此。doSomething（id）}/>
}
}
定义fat arrow函数时，可能需要传递id

class Home extends React.Component {

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

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

class Home扩展了React.Component{
剂量测定法（id）{
console.log（id）；
}
render（）{
返回此。doSomething（id）}/>
}
}
这与我的代码一样有效，非常感谢！这和我的代码一样，非常感谢！谢谢我忘了在我的最小示例中添加它，我添加了return语句以避免其他人混淆谢谢我忘了在我的最小示例中添加它，我添加return语句以避免其他人混淆