Question

我有一个包裹<input type=number>的组件。

这是我的JSX：

function InputNumber(props) {
    return (<input
               type="number"
               valueAsNumber={props.value}
               onChange={e => props.onChange(e.target.valueAsNumber)}
               step={props.step}
    />);
}

这编译成以下JS：

function InputNumber(props) {
    return (React.createElement("input", {type: "number", valueAsNumber: props.value, onChange: function (e) { return props.onChange(e.target.valueAsNumber); }, step: props.step}));
}

React给了我以下警告：

警告：标记上的未知道具valueAsNumber。从元素中删除此道具。

如果我从DOM中的element.valueAsNumber读取和写入，似乎工作正常，那么为什么React不知道这个属性？

Answer 1

要在React组件上使用非标准属性而不删除它们，您必须遵循HTML 5标准并在其前面加上“data-”，并且不要使用驼峰大小写。所以你的是：

data-value-as-number={props.value}

Answer 2

正如Jeff McCloud所说，你将使用非标准的html属性。您的功能可能会像这样重写：

function InputNumber(props) {
    return (<input
               type="number"
               data-valueAsNumber={props.value}
               onChange={e => props.onChange(e.target.dataset.valueAsNumber)}
               step={props.step}
    />);
}

Answer 3

根据DOM Elements Doc，valueAsNumber不是有效属性。 <{3}}剥离了不受支持的属性。

React尚未识别您指定的属性。这可能会在未来版本的React中修复。但是，React目前会删除所有未知属性，因此在React应用程序中指定它们不会导致它们被渲染。

您可能想要查看此代表：

This article also confirms

数字输入组件可以替换尚未得到很好支持的本机号码输入，它在不同的浏览器中具有相同的外观。此外，该组件提供更灵活的选项，可用于任何值（内部数值的不同格式表示）。

反应警告：<input />标记上的未知prop`valueAsNumber`

3 个答案: