时间戳

首页 > 解决方案 > 如果是数组，是否可以在 foreach 变量上添加 ref？

reactjs - 如果是数组，是否可以在 foreach 变量上添加 ref？

问题描述

我正在使用带有打字稿的反应，并希望迭代一个元素并为每个元素添加一个唯一的 ref 以检查是否选中了复选框元素。

  private product1Ref: HTMLInputElement;
  private product2Ref: HTMLInputElement;
  private product3Ref: HTMLInputElement;
  private product4Ref: HTMLInputElement;

const listItem: JSX.Element[] = [];
 this.props.products.forEach((ele) => {
  if(ele.isAvailable) {
        listItem.push(
            <li>
                <label>
                    <input
                        type="checkbox"
                        id={ele.name}
                        ref={(input) => ?????? = input}
                    />
                        {ele.name}
                    </label>
            </li>
        );
    }
});

现在可以将 ref 添加到上述元素吗？如果是这样，我们该怎么做？如果不是，另一种检查复选框元素是否被选中的方法是什么？

标签： reactjsforeachref

解决方案

我会将需要引用的部分提取到组件中：

function Checkbox({id, label}) {
    const [checked, setChecked] = useState(false);
    const onChange = useCallback(e => {
        setChecked(e.target.checked);
    }, []);
    return (
        <label>
            <input
                type="checkbox"
                id={id}
                checked={checked}
                onChange={onChange}
            />
            {label}
        </label>
    );
}

然后使用该组件：

const listItem: JSX.Element[] = [];
this.props.products.forEach((ele) => {
    if(ele.isAvailable) {
        listItem.push(
            <li>
                <Checkbox id={ele.name} label={ele.name} />
            </li>
        );
    }
});

推荐阅读