Question

我想创建一个具有简单表单的组件，可以说有4个输入字段和一个提交按钮。当用户单击提交时，将发出POST请求。但是，然后我想重用相同的组件来发出PUT请求。我该如何实现？

Answer 1

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

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

Answer 2

您可以将方法作为prop传递到组件中，然后在提交函数中引用以下属性：

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

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

Answer 3

将功能从父组件传递给子组件（窗体）：

https://codesandbox.io/s/4x3zjwxwkw

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

编辑：根据注释，您可以完全分隔POST和GET提交功能，但这会重复一些逻辑。最好是让<App />组件拥有两个提交功能，然后分别将它们传递给<UpdateRecipe />和<PostRecipe />，甚至标题也可以！我会让您随心所欲地撰写这篇文章，但希望这可以向您展示React的灵活性。

通过不同的方法调用重用React组件

3 个答案: