我能用<checked= />制作和<input === {this.state.foo=== "foo"} />完全一样的东西吗？ReactJS

Question

我有个小问题。我已经为某种服务创建了一个多步骤表单，但大多数字段(几乎每个字段)都是按钮。我希望将一个值传递给state，使其通过props传递到表单的末尾。我在之前的<input checked={} />项目中做了一些类似的事情，但是这些点看起来又丑又旧。我的问题是:有没有什么方法可以用按钮来做，或者至少去掉输入下面的圆点？

用于更改状态的函数：

handleChange = (e: any) => {
  this.setState({
    [e.target.id]: e.target.value,
  });
};

按钮代码的小示例：

<button
  className="choose_rank"
  name="selectMode"
  id="selectMode"
  value="conquest"
  // checked={values.selectMode === "conquest"}
  onClick={this.toggleConquest}
  onChange={handleChange}
  defaultValue={values.selectMode}
>
  {this.state.isConquest ? (
    <img src={conquestIconOn} alt="conquest_icon" />
  ) : (
    <img src={conquestIconOff} alt="conquest_icon" />
  )}
</button>

Answer 1

实际上，button元素没有input元素那样的checked属性。但是这里你有ReactJS，用你自己的道具创建你的按钮组件，然后做你想做的，注意以下几点：

import React from 'react';
import cn from 'classnames';

type ButtonProps = {
  checked: boolean,
  className: string,
  name: string,
  id: string,
  value: string,
  defaultValue: string,
  onClick: () => void,
  onChange: () => void,
};

const Button = ({
  checked,
  className,
  name,
  id,
  value,
  defaultValue,
  onClick,
  onChange,
  ...rest,
}: ButtonProps) => (
  <button
    className={cn(className, checked && "someClassName")}
    name={name}
    id={id}
    value={value}
    defaultValue={defaultValue}
    onClick={onClick}
    onChange={onChange}
  />
);

export default Button;

现在，您可以使用上面的Button组件而不是button元素，还可以将checked属性作为布尔值传递给组件。className={cn(className, checked && "someClassName")}只是一个用法示例。我从classname库中导入了cn函数来处理多类名，如果checked为true，则会将someClassName分配给按钮元素，您可以对此使用任何CSS。有很多方法可以使用这个布尔属性，这取决于你。