为什么 React 功能无法在 Chrome 和 Opera 上运行？

Question

我用 React 制作了一个单页应用程序，一切都很好，直到我在所有主要浏览器上测试它。

我在开发过程中使用了 Mozilla，但后来我在其他浏览器上尝试了它，它在 Edge、Explorer 和 Mozilla 上工作，但在 Chrome 和 Opera 上没有。所有 UI 的东西都工作正常，所有与设计相关的东西都表现良好，除了我用 React 制作的功能。因此，单击选项下拉菜单中的“膳食类型”，页面上应该会出现另一个列表，用这 3 个部分（博客、食谱、提示）替换最初的列表。该应用程序应该通过单击 Cookie 部分和再次单击 Horse 部分来进一步扩展。正如我所说，除了在 Chrome 和 Opera 中，所有这些都工作正常。我想让 React 像我在 Chrome 和 Opera 中描述的那样运行。

这是一个link文件

https://github.com/cristiAndreiTarasi/React_App

我希望在单击“膳食类型”选项时，应用程序会在 Chrome 和 Opera 浏览器中使这些附加部分显示在下方 - 就像在其他浏览器中一样 - 并找出问题所在。

Answer 1

在您的 Header.jsx 和 Footer.jsx 文件中，您多次使用 class 而不是 className，因此您应该更正：https://reactjs.org/docs/faq-styling.html

你的问题是你在 <option> 元素上注册了一个 onClick，而你应该在 <select> 元素本身上使用 onChange 道具，而不是<option> 元素。

 <select onChange={this.handleChange} className="custom-select mb-3">
    <option selected>All</option>
    <option value="mealType">Meal Type</option>
    <option>Ingredients</option>
    <option>World Cuisine</option>
    <option>Cooking Style</option>
 </select>

您的事件处理程序如下所示：

handleChange = (event) => {
 this.setState({
  [event.target.value]: true,
 });
}

你的状态不应该像现在这样持有整个 React 组件，而是尝试这样的事情：

state = {
 mealType: false,
}

你的渲染看起来像这样：

{this.state.mealType && <MealType click={this.handleClickTwo}/>}

作为一般规则：状态应包含组件的事件处理程序可能更改以触发 UI 更新的数据。 this.state 应该只包含表示您的 UI 状态所需的最少数据量。有关更多详细信息，请参见此处：http://web.archive.org/web/20150419023006/http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

为什么 React 功能无法在 Chrome 和 Opera 上运行？

Why does React functionality not working on Chrome and Opera?

cross-browser

reactjs