尽管我有 event.preventDefault 为什么在 React 重新加载页面中单击按钮？答案

【问题标题】：Why clicking on button in React reloading page despite I have event.preventDefault in it?尽管我有 event.preventDefault 为什么在 React 重新加载页面中单击按钮？
【发布时间】：2020-11-27 11:54:43
【问题描述】：

我对 React 很陌生，正在尝试创建我的第一个项目，在那里我创建了 2 个按钮。
一个用于获取 ID，第二个用于发送这些 ID 以通过这些 ID 获取实际项目。
无论如何，单击第二个按钮正在重新加载页面，尽管如此，我在函数体 **(displayCocktails)** 中有 event.preventDefault()。关于我缺少什么的任何想法？

第二个问题，我如何在 React 类组件中的方法之间传递数据（从第一个函数返回，然后使用第二个函数）？我想使用在 (displayCocktails) 函数中单击第一个按钮后获得的 ID，但我不知道如何传递它们。
提前谢谢！

import React from 'react'
import Form from './form/index'
import Form2 from './form2/index'
const APIkey = '1'
class App extends React.Component {
  state = {
    name: undefined
  }
  getCocktail = async (e) => {
    try {
      e.preventDefault();
      const ingredient = document.getElementById('input').value
      //https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Alcoholic
      const api_call = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${ingredient}`)
      console.log('first button')
      const data = await api_call.json()
      //https://www.thecocktaildb.com/api/json/v1/1/list.php?c=list
      if (ingredient) {
        //console.log(data)
        // console.log(IDs)
        var cockteilsList = data.drinks.map(el => el.idDrink);
        console.log(cockteilsList)
      }
    }
    catch (error) {
      console.log(error)
    }
    return cockteilsList
  }

  displayCocktails = async (e) => {

    try {
      e.preventDefault()
      const cocktail = document.getElementById('input').value
      console.log(cocktail)
      const api_call = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${cocktail}`)
      console.log('second button')
      const data = await api_call.json()
    }
    catch (error) {
      console.log(error)
    }
  }


  render() {
    return (
      <div> App component
        <Form getCocktail={this.getCocktail} />
        <Form2 displayCocktails={this.displayCocktails} />
      </div>
    )
  }
}


export default App;


//FORMS
 
import React from 'react'
const buttonStyle = {
    display: 'block',
    backgroundColor: 'red',
    width: 140,
    heigth: 80,
    borderRadius: 15
}
const Form = (props) => (

    <div>
        Press me to get coctail's reccomendation
        <form id='form' style={buttonStyle} onSubmit={props.getCocktail}>
            <input id='input' type='text' name='cocktail' placeholder='Cocktail' />
            <button>Get a recipe </button>

        </form>

    </div>

)
export default Form;


import React from 'react'
const buttonStyle = {
    display: 'block',
    backgroundColor: 'blue',
    width: 140,
    heigth: 80,
    borderRadius: 15
}
const Form2 = (props) => (

    <div>
        Press me to get coctail's reccomendation
        <form id='form' style={buttonStyle} method="POST" action="/" onSubmit={props.displayCocktails}>
            <input id='input2' type='text' name='cocktail' placeholder='Cocktail' />
            <button type='submit'>Get a recipe </button>

        </form>

    </div>

)
export default Form2;

【问题讨论】：

您能分享一下您的表单组件以及您是如何传递道具的吗？
已经添加了，谢谢你的回答。
我已经根据下面的建议修复了 form2，它现在可以工作了。但是我还是不明白为什么它们完全一样，但是刷新的问题只是我使用form2时出现的。

标签： reactjs api preventdefault

【解决方案1】：

第一个问题：

你的 displayCocktails() 函数可能会触发刷新，因为它是一个表单，并且 onSubmit 事件将触发浏览器刷新

你想在你的表单中添加你的onSubmit事件函数，像这样并确保您的按钮是type:submit

<form method="POST" action="/" onSubmit={this.displayCocktails}>

【讨论】：

如果有用，您能否将问题标记为“已回答”？ :)