尽管我有 event.preventDefault，为什么还要点击 React 重新加载页面中的按钮？

Question

我是 React 的新手，正在尝试创建我的第一个项目，我在其中创建了 2 个按钮。
一个用于获取 ID，第二个用于发送这些 ID，以通过这些 ID 实际获取项目。
不管怎样，点击第二个按钮会重新加载页面，尽管如此，我在函数体**(displayCocktails)** 中有 event.preventDefault()。对我缺少的东西有什么想法吗？

第二个问题，我如何在 React class 组件的方法之间传递数据（return 从第一个函数然后使用第二个函数）？我想在 (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;

Answer 1

第一个问题：

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

您想在表单中的 onSubmit 事件中添加该功能，如下所示并确保您的按钮是 type:submit

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

尽管我有 event.preventDefault，为什么还要点击 React 重新加载页面中的按钮？

Why clicking on button in React reloading page despite I have event.preventDefault in it?

api

preventdefault

reactjs