如何提交语义用户界面反应搜索值？

Question

我正在尝试将提交功能添加到我的语义用户界面反应搜索组件中，但是它并没有达到我想要的方式。

提交者应该对api进行ajax调用并注销数据。

有谁知道如何使它工作？我收到错误消息，或者即使我在输入字段中写了一些内容，我的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

Answer 1

此处所需的更改是：-

代替

<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