Question

我将一些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} />
  )
  }
}

我的Child组件看起来像这样：

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

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

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

我知道这不是一个太难的问题，但我仍然是一个使用JavaScript的菜鸟..

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

先谢谢你的帮助，

埃里克

Answer 1

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

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

Answer 2

我认为你需要这样的东西：

this.doSomething.bind(this);

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

Answer 3

首先，在Home组件中使用箭头函数doSomething prop来保留正确的上下文（或者你可以在组件构造函数中使用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>

Answer 4

首先你的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>

Answer 5

您可能需要在定义胖箭头功能时传递id

class Home extends React.Component {

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

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

将功能移交给onClick带参数的道具

5 个答案: