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

我的自定义组件（ReferrenceSelectBox）：

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

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>

Answer 2

Form Input.js

import React, { Component } from 'react';
import { Edit, SimpleForm, TextInput } from 'react-admin';
import SaveUpdate from './button/saveupdate.js';

export default class MemberDetail extends Component {
render(){
return (
<Edit title={"Member Detail"} {...this.props} >
 <SimpleForm redirect={false} toolbar={<SaveUpdate changepage={changepage}>
  <TextInput source="name" label="name"/>
 </SimpleForm>
</Edit>)
 }
}

/button/saveupdate.js

import React, { Component } from 'react';
import { Toolbar, UPDATE, showNotification, withDataProvider, GET_ONE} from 'react-admin';
import Button from '@material-ui/core/Button';

class SaveUpdate extends Component {

  doSaveUpdate = (data) => {
    const { dataProvider, dispatch } = this.props
    dataProvider(UPDATE, endPoint, { id: data.id, data: { ...data, is_approved: true } })
      .then((res) => {
        dispatch(showNotification('Succes'));
      })
      .catch((e) => {
        console.log(e)
        dispatch(showNotification('Fail', 'warning'))
      })
  }
render(){
return (
   <Toolbar {...this.props}>
          <Button  variant='contained' onClick={handleSubmit(data => { this.doSaveUpdate(data) })}>
            SAVE
          </Button>
        </Toolbar>
)
}

export default withDataProvider(SaveUpdate);

此句柄通过DataProvider额外提交

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

2 个答案: