如果是数组，是否可以在 foreach 变量上添加 ref？ [复制]答案

【问题标题】：Is it possible to add ref on foreach variable in case of an array? [duplicate]如果是数组，是否可以在 foreach 变量上添加 ref？ [复制]
【发布时间】：2019-12-10 17:05:06
【问题描述】：

我正在使用带有 typescript 的反应，并希望迭代一个元素并为每个元素添加一个唯一的 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 添加到上述元素吗？如果是这样，我们该怎么做？如果不是，另一种检查复选框元素是否被选中的方法是什么？

【问题讨论】：

标签： reactjs foreach ref

【解决方案1】：

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

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>
        );
    }
});

【讨论】：