Question

我用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浏览器中，就像在其他浏览器中一样，并找出问题所在。

Answer 1

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

您的问题是，您应该在onClick元素本身而不是{上使用<option>道具时，在onChange元素上注册<select> {1}}元素。

<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>

您的状态不应该像现在那样保存整个React组件，而是尝试这样的事情：

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

渲染如下所示：

state = {
 mealType: false,
}

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

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

1 个答案: