小编tda*_*mon的帖子

我有一个切换开关，其中我的样式输入组件引用我的样式标签组件

const Knob = styled.span`
  position: absolute;
  top: 0;
  left: 0;
  width: 3.25rem;
  height: 2rem;
  border-radius: 15px;
  background: ${basic[600]};
  cursor: pointer;
  &::after {
    content: "";
    display: block;
    border-radius: 50%;
    width: 1.7rem;
    height: 1.7rem;
    margin: 3px;
    background: #ffffff;
    transition: 0.2s;
  }
`;

const Toggle = styled.label`
  position: relative;
  ${applyStyleModifiers(BUTTON_MODIFIERS_STATUS)};
`;

const Check = styled.input`
  opacity: 0;
  z-index: 1;
  &:checked + ${Knob} {
    background: ${primary[500]};
    &::after {
      content: "";
      display: block;
      border-radius: 50%;
      width: 1.7rem;
      height: 1.7rem;
      margin-left: 1.3125rem;
      transition: 0.2s;
    } …

我正在尝试向我的项目添加配置，以便代码自动格式化。我对 VS Code 中的用户设置做了一些更新，还安装了 eslint 和 prettier。

现在每当我尝试保存我的代码时，都会从这里获取更改器

<div className={style.app}>
  <div className={style.mobileHeader}>
    <div className={style.logoBox}>
    </div>
  </div>
</div>

到

<
    div className = {
      style.app
    } >
    <
    div className = {
      style.mobileHeader
    } >
    <
    div className = {
      style.logoBox
    } >

所有这些添加的空白不仅不可读，因为我的 IDE 甚至没有将其注册为 JavaScript。

我在我的 .eslintrc.js 或 .eslintrc.json 中尝试了许多不同的配置（我只有一个，但我已经尝试了两种命名约定）。目前我已经删除了我的 .eslintrc.json 中的所有内容，除了空括号 {}。我最近还更新了我的用户设置

{
  "files.autoSave": "afterDelay",
  "window.zoomLevel": 0,
  "git.autofetch": true,
  "explorer.confirmDragAndDrop": false,
  "workbench.startupEditor": "welcomePage",
  "dart.flutterSdkPath": "/Users/trevor/Applications/flutter",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "python.pythonPath": "/usr/local/bin/python3",
  "editor.defaultFormatter": "octref.vetur",
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": …

我从事这个测试已经有一段时间了，虽然我可以在网上找到几个解决方案，但我找不到任何适合我的解决方案。onChange我想检查使用该函数时输入字段中显示的文本是否正在更新。我不想直接测试状态。

我有一个具有以下状态和更改处理功能的表单：

const [formState, setFormState] = useState({
    createFirstName: '',
    createLastName: '',
    createEmail: '',
    createJobTitle: '',
    createWorkPhone: '',
    createCellPhone: '',
    createExtension: '',
  });

  const handleChange = event => {
    const value = event.target.value;
    setFormState({
      ...formState,
      [event.target.name]: value
    });
  };

到目前为止相当标准。我还有一个带有以下输入字段的表单：

<input
   name="createFirstName"
   id="assign-role-form-first-name-input"
   onChange={handleChange}
   type="text"
   ref={register({ required: true })}
   defaultValue={""}
            />

现在我应该提到我正在使用react-hook-form它有助于表单验证，尽管我不认为这会导致问题。

我正在尝试编写一个触发输入值更改的测试。我尝试过许多不同的组合，例如：

it('Should capture firstname correctly onChange', () => {
    const wrapper = mount(<AssignRoleForm />);
    const input = wrapper.find('#assign-role-form-first-name-input')
    input.simulate('change', {target: {value: 'Goose'}});
    expect(input.props()).toEqual('Goose')
})

或者 …

我正在构建一个进度条，它需要两个输入，totalSteps并且activeStep. 我将渲染一些等于总步骤数的圆圈，其中活动步骤为灰色。

我有映射对象数组的经验，但是在这种情况下，我没有数组，只是给出了一个整数。

我正在尝试编写一个div在 for 循环中返回 a 的函数，但这不起作用。

const ProgressBar = (props) => {
  const { activeStep, totalSteps } = props;

  const displayProgressBar = () => {
    for (let i = 1; i <= totalSteps; i++) {
      return <div>Hello</div>;
    }
  };
  return <div className="progressBar">{displayProgressBar()}</div>;
};

上面的代码Hello即使totalSteps是3也只渲染一次。有没有办法在不创建数组的情况下达到预期的结果？

我发现了很多关于重写样式的帖子，但没有什么比我遇到的问题更相似的。我正在创建样式化的material-ui组件并将它们导入到我的应用程序的不同部分。我希望能够覆盖各个父组件中的一些样式。

我有一个按钮组件：

import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  buttonBlue: {
    background: "#09a1e2",
    border: "1px solid #09a1e2",
    borderRadius: "5px",
    color: "#ffffff",
    cursor: "pointer",
    fontSize: "1.25rem",
    padding: ".75rem 1.25rem .75rem 1.25rem",
    "&:hover": {
      backgroundColor: "#ffffff",
      color: "#09a1e2"
    }
  },
  buttonWhite: {
    background: "#ffffff",
    border: "1px solid #666666",
    borderRadius: "5px",
    cursor: "pointer",
    fontSize: "1rem",
    padding: ".5rem",
    width: "6rem",
    "&:hover": {
      backgroundColor: "#666666",
      color: "#ffffff"
    }
  }
});

const MediumButton = props => {
  const color …

我有一个具有固定填充且没有固定宽度的按钮组件。这个按钮在很多地方都使用，我希望按钮根据按钮上显示的文本改变宽度。

我现在尝试向按钮添加一个切换微调器，以便当用户单击按钮时文本消失并显示微调器。我遇到的问题是按钮不断调整大小，因为微调器的宽度与文本不同

export const Buttons = styled.button`
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
`

这些是我当前的按钮样式。