CODEWITHSUNDEEP
javascriptreactjsreact-admin
Jason Derrick
Jason Derrick

Reputation: 114

How to handle onSubmit inside custom component

My custom component has onChange event, which is working pretty good, but when I tried onSubmit, It does not work. Alert does not display.

Currently my data provider get all values from inputs except my custom component, what should I do? what's wrong with the code? It's possible to pass data from this custom component to the parrent form?

Parrent form:

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

My custom component (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>
    );
  }

Upvotes: 0

Views: 2407

Answers (2)

Louis Christopher
Louis Christopher

Reputation: 81

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

This handlesubmit extra withDataProvider

Upvotes: 0

Engineer
Engineer

Reputation: 1261

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>

Upvotes: 1

Related Questions