Question

我正在使用带有typescript的react，并且想要迭代一个元素，并向每个元素添加唯一的ref，以检查是否选中了checkbox元素。

  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添加到上述元素中吗？如果可以，我们该怎么做？如果不是，检查复选框元素是否选中的另一种方法是什么？

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

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

1 个答案: