小编Hen*_*que的帖子

我是测试新闻，这是我的问题

我有那个简单的登录组件：

import React, { useState } from "react";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function handleLogin(event) {
    event.preventDefault();
    console.log(email, password);
  }

  return (
    <form data-testid="login-form" onSubmit={handleLogin}>
      <input
        data-testid="useremail"
        type="email"
        placeholder="Email"
        value={email}
        onChange={event => setEmail(event.target.value)}
      />

      <input
        data-testid="userpassword"
        type="password"
        placeholder="Password"
        value={password}
        onChange={event => setPassword(event.target.value)}
      />
      <button onClick={handleLogin}>login</button>
    </form>
  );
}

我在这里我的测试尝试：

import React from "react";
import Login from "../pages/Login";

import { render, fireEvent } from "@testing-library/react";

describe("Login component", () => { …

我知道我总是需要用来<safeAreaView>将我的内容保留在 iOS 屏幕的正确位置。

即使我只为 Android 构建一个应用程序，如果我想为 iOS 平台构建相同的应用程序，似乎使用也没有问题。<safeAreaView>

我的问题是，如果我总是用它<safeAreaView>来包装我的所有内容，我错了吗？<View>如果将来我可能必须用 替换所有内容，为什么我要使用<safeAreaView>？

这是我的问题

我有一个带有名称的简单数组，当我单击一个元素时，该元素将处于活动状态，而另一个元素将处于活动状态

问题

当我单击一个元素时，所有元素都会变为活动状态

我想要的是

当我点击“名称1”时，背景变成红色，其他背景变成白色，当我点击“名称2”时，背景变成红色，其他背景变成白色，依此类推

这就是我一直在尝试做的

https://codesandbox.io/s/nifty-saha-8ho1u?file=/src/App.js