Reactの子要素でhandleSubmitが使えなくて困っています

Question

現在、Reactと、Reduxを使って情報を更新する機能を実装しています。

親要素の中で、handleSubmitを使った時にはちゃんと動いたのですが、子要素の中で実行しようとすると反応がありません。目的としては、下記コードのなかでonSubmit()を実行することになります。

src/components/ItemForm.js

class ItemForm extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    { id } = this.props;
    this.props.fetchItem(id);
  }

  renderField = field => {
    const { input } = field;
    return (
      <label>アイテム</label>
      <textarea {...input} placeholder={"内容を入力してください"} rows="6" />
    );
  };

  onSubmit = values => {
    const { item } = this.props;
    this.props.updateItem(item, values);
  };

  render() {
    const { handleSubmit, item, placeholder } = this.props;
    return (
      <form
        onSubmit={handleSubmit(this.onSubmit)}
      >
        <Field
          label={title}
          name="content"
          value={item.content}
          placeholder={placeholder}
          component={this.renderField}
        />
        <div className="formBtn">
          <button type="submit" className="btn btnPrimary">
            Save Changes
          </button>
        </div>
      </form>
    );
  }
}

const validate = values => {
  const errors = {};
  if (!values.content) errors.content = "内容を入力してください";
  return errors;
};

const mapDispatchToProps = { fetchItem, updateItem };

function mapStateToProps({ items }) {
  return {
    item: items,
    initialValues: {
      content: items.content
    }
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(
  reduxForm({ validate, form: "itemForm", enableReinitialize: true })(
    ItemForm
  )
);

src/components/Item.js

class Item extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div>
          <ItemForm id={1} />
          <ItemForm id={2} />
         </div>
      </div>
    );
  }
}

export default Item;

Answer 1

onSubmit={handleSubmit(this.onSubmit.bind(this))}と書くと、renderした時点でhandleSubmitを実行してしまいます。おそらくそれは本来やりたい挙動と違うのではないかと思います。

Comments

[k10a]

ご回答いただきましてありがとうございます。
handleSubmit(this.onSubmit)で試してみたのですが同じように動きません。。正確に言うと、handleSubmit(this.onSubmit)で動かなかったので、handleSubmit(this.onSubmit.bind(this))で試してみた次第です。

[k10a]

一旦、別の構成で考えてみることにします。ありがとうございます！

[maisumakun]

どちらにしても、そこにhundleSubmit(と書いた時点で「即時実行」という意味になります。引数は何であっても関係ありません。