如何仅在反应功能组件中调用默认选中或默认选中属性的方法

Question

你好，我是 React 的新手，所以我正在尝试调用函数，因为我想在某些条件下显示选中的复选框。

我试过下面的代码，但它没有调用

HTML

<input type="checkbox" className="form-check-input" id="wifi" defaultChecked={(name) => 
checkIt(name)} /> // Here i removed onChange event because that method is working

<label className="form-check-label" htmlFor="wifi">Free Wifi</label>

JS

const checkIt = (name) => {
        console.log(`
            name : ${name},
       `)
 }

我的期望： checkIt 默认情况下加载的方法调用与 funtional component 的反应只有我想要那个名称和值，感谢您的回答。

Answer 1

你好@DeveloperLion 您可以使用下面的代码来检查有条件的复选框，不需要在 checked 或 defaultchecked 属性上调用函数，只需循环数组并将对象传递给自定义组件和自定义组件中只需提取您想要的密钥并使用它。

所以首先你需要创建一个数组，例如

const facilitiesCheckBox = [
    {
      id: 1,
      name: "Free Wifi",
      value: "wifi",
      isChecked: true
    },
    {
      id: 2,
      name: "Gym",
      value: "gym",
      isChecked: false
    },
    {
      id: 3,
      name: "Swimming Pool",
      value: "swimmingpool",
      isChecked: false
    },
    {
      id: 4,
      name: "Kids’ Clubs",
      value: "kids",
      isChecked: false
    },
    {
      id: 5,
      name: "Spa area",
      value: "spa",
      isChecked: true
    },
    {
      id: 6,
      name: "Fitness area",
      value: "fitness",
      isChecked: false
    },
    {
      id: 7,
      name: "Air Conditioning",
      value: "air",
      isChecked: true
    }
  ];

之后你必须用那个数组循环 HTML 例如

return (
    <div>
      {facilitiesCheckBox.map(checkbox => (
        <CheckboxComponent
          setCheckbox={checkbox}
          key={checkbox.id}
          change={checkboxHandle}
        />
      ))}
    </div>
  );

现在在功能组件上将键属性传递给组件，如果你没有传递它那么它会给你这样的警告并将 props 传递给 customcomponent.

警告

Each child in a list should have a unique "key" prop.

<CheckboxComponent setCheckbox={checkbox} key={checkbox.id} change={checkboxHandle} />

例如创建自定义功能组件后

const CheckboxComponent = ({ setCheckbox, change }) => {
  const { id, name, value, isChecked } = setCheckbox;

  return (
    <div className="col-lg-2 col-md-4 col-sm-6 col-xs-12">
      <div className="form-check">
        <input
          type="checkbox"
          className="form-check-input"
          id={value}
          defaultChecked={isChecked}
          onChange={change}
        />
        <label className="form-check-label" htmlFor={value}>
          {name}
        </label>
      </div>
    </div>
  );
};

并通过defaultChecked={isChecked}从数组

中检查

如果你想要代码，如果你想预览那么你可以 here

如何仅在反应功能组件中调用默认选中或默认选中属性的方法

How to Call method default on checked or default checked attribute in react functional component only

methods

checkbox

reactjs

react-functional-component