Reactjs, как получить значение из выбранного элемента - PullRequest
Новая
       16

Reactjs, как получить значение из выбранного элемента

0 голосов
/ 26 июня 2018

поэтому у меня есть этот код для публикации в моем бэкэнд-API. Нормальная форма отлично в порядке; Мне удалось опубликовать в моей базе данных. Поэтому я добавляю Cascader из Ant Design CSS Framework, и каждый раз, когда я выбираю значение, выдается ошибка

TypeError: Невозможно прочитать свойство 'value' из неопределенного

Вот код: 

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

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Согласно документам antd вам не нужно event.target.https://ant.design/components/cascader/

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

Приведенный выше код будет работать нормально.

0 голосов
/ 26 июня 2018

Вам нужно либо связать ваши обработчики событий в конструкторе, либо использовать функцию стрелки.

Вариант 1: Bind 

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

Вариант 2: функция стрелки 

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