javascript - 如何在自定义组件中处理 onSubmit

Question

我的自定义组件有 onChange 事件，效果很好，但是当我尝试 onSubmit 时，它不起作用。不显示警报。

目前我的数据提供者从输入中获取所有值，除了我的自定义组件，我该怎么办？代码有什么问题？可以将此自定义组件中的数据传递到父表单吗？

父母形式：

export const smthEdit = props => (
    <Edit {...props} title={<smthTitle/>} aside={<Aside />}>
        <SimpleForm>
        <DisabledInput source="Id" />
        <TextInput source="Name" />
        <ReferrenceSelectBox label="Socket" source="SocketTypeId" reference="CPUSocketType"></ReferrenceSelectBox>
        <DateField source="CreatedDate" showTime
            locales={process.env.REACT_APP_LOCALE}
            disabled={true} />
        </SimpleForm>
    </Edit>
);

我的自定义组件（参考选择框）：

  handleSubmit(event) {
    alert('smth');
  }

  render() {
    return (
      <div style={divStyle}>
        <FormControl onSubmit={this.handleSubmit}>
            <InputLabel htmlFor={this.props.label}>{this.props.label}</InputLabel>
            <Select
              multiple
              style={inputStyle}
              value={this.state.selectedValue}
              onChange={this.handleChange}
            >
              {this.renderSelectOptions()}
            </Select>
        </FormControl>
      </div>
    );
  }

标签： javascriptreactjsreact-admin

Answer 1

Error is change FormControl to form

<form onSubmit={(event) => this.handleSubmit(event)}>
            <InputLabel htmlFor={this.props.label}>{this.props.label}</InputLabel>
            <Select
              multiple
              style={inputStyle}
              value={this.state.selectedValue}
              onChange={this.handleChange}
            >
              {this.renderSelectOptions()}
            </Select>
        </form>