我可以用<按钮 /> 制作与 <input checked={this.state.foo === "foo" } /> 完全相同的东西吗？反应

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属性作为布尔值传递给组件。CCD_ 8只是使用的一个示例。我从classname库导入了cn函数来处理多类名，如果checked将是true，则someClassName将被分配给按钮元素，您可以为此使用任何CSS。有很多方法可以使用这个布尔道具，这取决于你自己。