向上触发自定义组件的事件-解网

问：

我有一个名为 CoolButton 的定制组件。如果我将该组件涉及到另一个组件中，如下所示，我想以某种方式触发 onClick-event，就像它是一个普通按钮一样。

第二个问题（不那么重要）是，是否可以访问在子/CoolButton-Component中向下传递的 Press Me 值。我宁愿让 Press Me 被移除，而不是 I'm 按钮

export default function Home() {
  [timesClicked, setTimesClicked] = useState(0)

  return (
      <div className="home">
          <h1>Click the button!</h1>
          <div>The CoolButton has been clicked {timesClicked} times!</div>
          <CoolButton onClick={() => setTimesClicked(timesClicked + 1)}>Press Me</CoolButton>    
      </div>
  ); 
}

export default function CoolButton() {
  return (
      <div className="cool_button">
        <button>I'm button</button>
      </div>
  ); 
}

ReactJS 事件回调 onchange

export default function Home() {
    const [timesClicked, setTimesClicked] = useState(0);
    return (
      <div className='home'>
        <h1>Click the button!</h1>
        <div>The CoolButton has been clicked {timesClicked} times!</div>
        <CoolButton
          setTimesClicked={setTimesClicked}
          title='Press Me'
        />
      </div>
    );
  }
  
  export default function CoolButton({ title, setTimesClicked }) {
    return (
      <div className='cool_button'>
        <button onClick={() => setTimesClicked((oldTimes) => oldTimes + 1)}>{title}</button>
      </div>
    );
  }

1赞 Enes Toraman 7/14/2022 #2

您正在将 prop 传递给组件。除非你在组件中使用该道具，否则它不会有任何区别。关于你的第二个问题，如果你想把你的组件包裹在一些内容上，你应该在组件中提供。像这样的东西：onClickCoolButtonchildren

export default function Home() {
  [timesClicked, setTimesClicked] = useState(0)
  
  return (
    <div className="home">
      <h1>Click the button!</h1>
      <div>The CoolButton has been clicked {timesClicked} times!</div>
      <CoolButton onClick={() => setTimesClicked(timesClicked + 1)}>Press Me</CoolButton>    
    </div>
  );
}

export default function CoolButton(props) {
  return (
    <div className="cool_button">
      <button onClick={props.onClick}>{props.children}</button>
    </div>
  ); 
}

上一个：包含数据的通用回调

下一个：如何在 Yii2 中返回视图后执行代码

向上触发自定义组件的事件

Trigger events upwards for custom components

评论