如何提交semantic-ui-react Search值？

Question

我正在尝试将提交功能添加到我的语义-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

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

如何提交semantic-ui-react Search值？

How to submit semantic-ui-react Search value?

javascript

reactjs

semantic-ui

semantic-ui-react