反應警告：未知的道具`valueAsNumber`上<input>標記

我有一個組件包裝<input type=number>。反應警告：未知的道具`valueAsNumber`上<input>標記

這裏是我的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})); 
}

陣營是給我以下警告：

警告：未知的道具valueAsNumber上標籤。從元素中刪除此道具。

它似乎工作正常，如果我在DOM中讀寫element.valueAsNumber，那麼爲什麼React不知道這個屬性？

來源

2016-12-01 styfle

請勿在標準HTML標記上使用非標準屬性。 –

根據DOM Elements Doc,valueAsNumber不是有效的屬性。 This article also confirms不支持的屬性被剝離。

React尚未識別您指定的屬性。這可能會在未來版本的React中修復。但是，React目前會去除所有未知屬性，因此在您的React應用程序中指定它們不會導致它們被渲染。

你可能想看看這個回購協議，而不是：

react-numeric-input

號碼輸入組件，可替換還未被很好的支持本機號碼輸入和它在哪裏，它在瀏覽器中並沒有相同的外觀。此外，此組件提供更靈活的選項，可用於任何值（不同格式的內部數值表示）。

來源

2016-12-01 22:00:14

我以爲React使用js屬性，而不是html屬性。例如''而不是''''，因爲那是js屬性名稱。閱讀完文檔後，聽起來他們只是創建了自己的屬性名稱。 – styfle

是的，沒有。 'className'是特殊的，因爲'class'是一個JS保留字。他們使用傳播給HTML屬性的camelCase道具。但他們只能通過支持的。 –

我只是假設他們在做'var div = document.createElement（'div'）; DIV。className =「foo」;'但現在我想到了，他們必須發佈HTML用於服務器端呈現，所以現在它有道理爲什麼他們不支持'valueAsNumber'，因爲它不是一個屬性:( – styfle

要在不刪除React組件的情況下使用非標準屬性，您必須遵循HTML 5標準，並以「data-」爲前綴並且不要使用駝峯大小寫。所以你的將是：

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

來源

2016-12-01 22:47:56

W3C 2014年10月28日的建議：[type = number]（https：// www.w3.org/TR/html5/forms.html#number-state-(type=number））AND [val ueAsNumber]（https://www.w3.org/TR/html5/forms.html#dom-input-valueasnumber） – w35l3y

正如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} 
    />); 
}

來源

2017-08-13 09:58:38

反應警告：未知的道具`valueAsNumber`上<input>標記

回答

相關問題