REACT- 如果值=1 则填充复选框，否则不填充

Question

如何创建一个在 item.availability=1（例如）elif 0 未填充时填充的复选框。我可以 return {item.availability} 在 Checkbox 函数中，但我想要更通用的东西。

export default function Display() {
  ...      
  function Checkbox({ value }) {
    const [checked, setChecked] = React.useState(true);

    return (
      <label>
        <input
          type="checkbox"
          defaultChecked={checked}
          onChange={() => setChecked(!checked)}
        />
        {value}
      </label>
    );
  }
  return (
    <>
          ....
          {"Availability "}
          <Checkbox ({item[0].availability})/>
        </div>
      </div>
    </>
  );
}

Answer 1

您可以将接收到的 value prop 设置为 checked 状态的初始状态。然后根据状态在input元素中制作checked prop:

function Checkbox({ value }) {
    const [checked, setChecked] = React.useState(value);

    return (
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={() => setChecked(checked => !checked)}
        />
        {value}
      </label>
    );
  }

确保正确传递道具：

<Checkbox value={!!item.availability} />

REACT- 如果值=1 则填充复选框，否则不填充

REACT- Fill checkbox if value=1 else not filled

javascript

checkbox

reactjs

react-native

react-hooks