CODEWITHSUNDEEP
formsreactjsdrop-down-menuaxios
Eko Andri
Eko Andri

Reputation: 191

Reactjs how to get value from selected element

so I have this code for posting to my backend API. Normal form perfectly fine; I managed to post to my database. So I add a Cascader from Ant Design CSS Framework, and every time I selected the value, it produced an error

TypeError: Cannot read property 'value' of undefined

Here is the code:

import React from 'react';
import axios from 'axios';
import { Button, Cascader, Form, Input, Modal } from 'antd';

const FormProduct = Form.Item;
const computerType = [
  {
    value: 'computer',
    label: 'Computer',
  },
  {
    value: 'laptop',
    label: 'Laptop',
  }
]

export default class FormInventory extends React.Component {
  state = {
    category: '',
    productname: '',
  };

  handleCategoryChange = event => { this.setState({ category: event.target.value }) }
  handleProductNameChange = event => { this.setState({ productname: event.target.value }) }

  handleSubmit = event => {
    event.preventDefault();

    axios.post('myapi',
      {
        category: this.state.category,
        productname: this.state.productname,
      })
      .then(
        function success() {
          const modal = Modal.success({
            title: 'Success',
            content: 'Data successfully add',
          });
          setTimeout(() => modal.destroy(), 2000);
        }
      )
  }

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormProduct {...formProductLayout} label="Computer Category">
          <Cascader options={computerType} category={this.state.value} onChange={this.handleCategoryChange} />
        </FormProduct>
        <FormProduct {...formProductLayout} label="Product Name">
          <Input type="text" productname={this.state.productname} onChange={this.handleProductNameChange} />
        </FormProduct>
        <FormProduct wrapperCol={{ span: 12, offset: 2 }}>
          <Button type="primary" htmlType="submit">
            Add Item
          </Button>
        </FormProduct>
      </Form>
    )
  }
}

Upvotes: 0

Views: 2662

Answers (2)

Kamran Nazir
Kamran Nazir

Reputation: 692

According to antd docs you don't need event.target. https://ant.design/components/cascader/

handleCategoryChange = category => { this.setState({ category }) }

The code above will work fine.

Upvotes: 1

Anu
Anu

Reputation: 1079

You need to either bind your event handlers in the constructor or use arrow function.

Option 1: Bind

constructor(props) {
  // This binding is necessary to make `this` work in the callback
  this.handleClick = this.handleClick.bind(this);
}

Option 2: Arrow function

<Input onChange={(e) => this.handleChange(e)} />

Upvotes: 2

Related Questions