Question

我为一个具有动画效果的按钮制作了一个组件，这样我只需导入即可在其他组件中使用它。我在Button组件中为动画制作了很多代码，所以我不想在其他组件中一次又一次地使用很多相同的代码。

有什么方法可以通过导入将Button用于不同的事件。例如;在一个组件中，我导入 Button 作为提交用户信息，在另一个组件中，我导入 Button 用于显示用户数据。

Answer 1

当然！这是组件的想法。您可能希望在Button中收到一个道具来处理onClick发生的一切。

IE。

父组件创建要处理的especific函数

function handleClick() { ... }

<YourCustomButton onClick={handleClick} />

在YourCustomButton中，只需在事件上使用此功能

class YourCustomButton extends React......

<Button onClick={this.props.onClick}> ...

Answer 2

为按钮创建道具以提供类似的选项

其他组件的实现：

<custombutton mode={"submitmode"} clickevent={handleBtnClick} />
<custombutton mode={"displaymode"} clickevent={handleBtnClick} />

handleBtnClick=() =>{

if(mode =="submitmode"){
//..do code for submit
}
else if(mode=="displaymode"){
//..do code for display
}
 }

实际按钮组件：

class Button extends custombutton{

handleClick =() =>{
this.props.clickevent();
}

render(){
return(
{props.mode=="submitmode" &&
<button type="submit" onClick={handleClick} class="submitstyle" />
}

{props.mode=="displaymode" &&
<button class="displaystyle" onClick={handleClick} />
}

);
}
}

Answer 3

当然有，只是给它不同的道具：

关于代码框的示例：

https://codesandbox.io/s/admiring-wing-okiqw

父母：

function App() {
  return (
    <div className="App">
      <h1>Hi there</h1>
      <h2>Click on first button to sum 1, click to second button to sum 2!</h2>
      <Fbutton functionality="sumone" />
      <Fbutton functionality="sumtwo" />
    </div>
  );
}

您要呼叫Fbutton两次，一次使用sumone，另一次使用sumtwo个道具。

儿子：

function Fbutton(props) {
  const [count, setCount] = useState(0);
  const sumone = () => setCount(count + 1);
  const sumtwo = () => setCount(count + 2);

  return (
    <div>
      <button onClick={props.functionality === "sumone" ? sumone : sumtwo}>
        Sum: {count}
      </button>
    </div>
  );
}

Answer 4

假设您有一个类似<Button pageName="home" />的按钮

在该组件中，

class Button extends Compoenent {



onClick =()=>{
if(this.props.pageName == "home"){
// do your home action
} else if(this.props.pageName == "tab"){

// do your tab action
}
}

render(){
return(
<Button onClick={() => this.onClick()} />
)
}
}

希望很清楚，毫无疑问

如何将单个按钮用于两个目的

4 个答案: