为什么 React 功能在 Chrome 和 Opera 上不起作用？答案

【问题标题】：Why does React functionality not working on Chrome and Opera?为什么 React 功能在 Chrome 和 Opera 上不起作用？
【发布时间】：2019-01-27 04:49:08
【问题描述】：

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

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

这是文件的链接

https://github.com/cristiAndreiTarasi/React_App

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

【问题讨论】：

我没有时间浏览您的项目，但显然 chrome 开发人员工具中存在错误。您在许多地方使用的是 class 而不是 className 。如果我是你，我会先开始修复这些错误。

标签： reactjs cross-browser

【解决方案1】：

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

您的问题是您在<option> 元素上注册了onClick，而您应该在<select> 元素本身而不是<option> 元素上使用onChange 属性。

 <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,
 });
}

你的 state 不应该像现在这样持有整个 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

【讨论】：