Как отправить значение поиска semantic-ui-react?

Я пытаюсь добавить функцию отправки в свой компонент поиска semantic-ui-react, но он ведет себя не так, как я хочу.

Отправка должна сделать ajax-вызов API и вывести данные из системы.

Кто-нибудь знает, как заставить его работать? Я либо получаю ошибки, либо мой поисковый запрос запроса ajax оказывается пустым, даже если я что-то пишу в поле ввода.

import React, {Component} from 'react'
import { Container, Header, Search } from 'semantic-ui-react'

import './jumbotron.css'


class Jumbotron extends Component {
constructor(props) {
    super(props)

    this.state = {value: ''}

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event) {
    this.setState({value: event.target.value})
  }

  handleSubmit(event) {
    const food = this.state.value;
    const url = `https://api.edamam.com/search?q=${food}&app_id=${appId}&app_key=${apiKey}`

    fetch(url).then( response => response.json())
    .then( data => console.log(data))

    event.preventDefault();
  }


    render() {
        return (
            <Container text>
                <Header>
                    Nutrion
                </Header>
                <form onSubmit={this.handleSubmit}>
                <Search
                onChange={this.handleChange}
                type='text'
                value={this.state.value} 
                size='big'
                placeholder=' ...'/>
                <input type="submit" value="Submit" />
                </form>
            </Container>
        )
    }
}

export default Jumbotron


reactjs javascript semantic-ui-react semantic-ui
person Hyrule    schedule 05.06.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Здесь требуется изменение: -

Вместо

<Search
    onChange={this.handleChange}
    type='text'
    value={this.state.value} // THIS CAUSING CONFICT WITH INTERNAL STATE?
    size='big'
    placeholder='What would you like to eat today? ...'/>

Должно быть

<Search
    onSearchChange={this.handleChange}
    type='text'
    value={this.state.value} // THIS CAUSING CONFICT WITH INTERNAL STATE?
    size='big'
    placeholder='What would you like to eat today? ...'/>

Обычно onChange следует заменить на onSearchChange.

person VivekN    schedule 05.06.2017
comment
Вы также знаете, как сделать так, чтобы он мог отправлять с нажатием ввода? - person Hyrule; 05.06.2017
comment
В идеале он должен работать, когда вы нажимаете ввод, так как у вас есть type=submit - person VivekN; 05.06.2017
comment
эта строка внутри файла semantic js search.js вызывает эту проблему, если (_lib.keyboardKey.getCode(e)!== _lib.keyboardKey.Enter) return; e.preventDefault(); - person VivekN; 05.06.2017
comment
Давайте продолжим обсуждение в чате. - person VivekN; 05.06.2017
comment
Давайте продолжим обсуждение в чате. - person Hyrule; 05.06.2017