Reactjs 使用不同的方法调用重用react组件

我想用一个简单的表单创建一个组件，比如说有4个输入字段和一个提交按钮。当用户单击submit时，将发出POST请求。

---

但是我想重用相同的组件来发出PUT请求。如何实现这一点？

您可以将方法作为道具传递给组件-这样您可以在组件之外定义功能，并让它在组件范围内执行

---

例如，将onPress事件传递给按钮，或将onClick事件传递给任何其他组件。

您可以将该方法作为

道具

传递给组件，然后在提交函数中引用道具，如下所示：

submit = () => {
     var data = {
        method: this.props.method,
        ...
     };

   fetch('/url/', data);
}

---

将函数从父组件传递给子组件（表单）：

const-App=（）=>(
);
类CreateRecipe扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onSubmit=this.onSubmit.bind（this）；
}
提交（e）{
e、 预防默认值（）；
console.log（“Do POST recipe”）；
}
render（）{
返回(
);
}
}
类UpdateRecipe扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onSubmit=this.onSubmit.bind（this）；
}
提交（e）{
e、 预防默认值（）；
log（“DoGetRecipe”）；
}
render（）{
返回(
);
}
}
常量MyForm=（{title，onSubmit}）=>{
返回(
{title}
提交
);
};

---

EDIT：根据注释，您完全可以将

POST

和

GET

提交函数分开，但这有点重复逻辑。更好的方法是让

组件拥有两个提交函数，并将它们分别传递给

和

，甚至可能还有标题！我会让你随心所欲地撰写这篇文章，但希望这能显示React的灵活性。

创建三个独立的组件可以吗，一个使用post方法，另一个使用update方法，最后一个使用表单本身？@是的，当然可以。刚刚更新了答案和沙盒链接。如果您绝对不想在同一组件中使用

POST

和

GET

函数，可以在

CreateRecipe

和

UpdateRecipe

中复制逻辑。

const App = () => (
  <div>
    <CreateRecipe />
    <UpdateRecipe />
  </div>
);

class CreateRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }
  onSubmit(e) {
    e.preventDefault();
    console.log("Do POST recipe");
  }
  render() {
    return (
      <div>
        <MyForm title="POST Recipe" onSubmit={this.onSubmit} />
      </div>
    );
  }
}

class UpdateRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }
  onSubmit(e) {
    e.preventDefault();
    console.log("Do GET recipe");
  }
  render() {
    return (
      <div>
        <MyForm title="GET Recipe" onSubmit={this.onSubmit} />
      </div>
    );
  }
}

const MyForm = ({ title, onSubmit }) => {
  return (
    <div>
      <h2>{title}</h2>
      <form onSubmit={onSubmit}>
        <input type="text" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};