如果value屬性被設置，我的文本輸入如何爲空？

看看下面的截圖。您可以看到文本輸入字段爲空，但其value屬性設置爲「b」。如果value屬性被設置，我的文本輸入如何爲空？

您還會注意到在屬性選項卡，input下，該value這裏被設置爲「」。他們爲什麼不同？這是什麼意思？

這可能與輸入是由React渲染的事實有關嗎？

如果有幫助，這裏是負責這個元素（節錄）的JSX：

return (
    <td 
    key={field._id} 
    className={`oldField ${colPos}`} 
    > 
    <input 
     type="text" 
     defaultValue={value} 
     onChange={this.changeOldField(record, field)} 
    /> 
    </td> 
)

來源

2017-08-14 Shawn

first-col正常工作，它不是由Reach渲染的？ – Mindless

我不確定我瞭解你的問題。如果這就是你的意思，所有東西都用React渲染。在'first-col'，'last-col'和'oldField'的情況下，我通過我的jsx中的''標籤的'className'屬性添加它們（請參閱我的編輯）。 – Shawn

我剛剛注意到，在'輸入'下的Properties選項卡中，'defaultValue'被設置爲'b'，如預期的那樣。只有「價值」本身不是。然而，自從最後一次React渲染以來，我並沒有改變該字段的值。 – Shawn

看來你是基於從國家一些改變默認值。 defaultValue prop應該只設置一次，以後不再更改，因爲React會忽略更多的更改。如果您想根據狀態更改值，則應使用正常值prop。否則，如果您希望向用戶顯示預定義的值，並且同時在輸入發生更改時控制輸入，則可以在代碼中使用某些邏輯來處理onChange和組件中要自動更改的代碼該值，或者可能將其放置在佔位符prop中，這會給你一些你想要的東西。

來源

2017-08-14 03:51:04

如果我使用'value'而不是'defaultValue'，那麼用戶不能修改該字段。由於用戶無法附加到佔位符值，因此'placeholder' prop不夠好。至於「在你的代碼中使用一些邏輯來處理onChange和你的組件中想要自動改變值的代碼」，我不明白你的意思。我在輸入上有一個'onChange'監聽器，我依靠'defaultValue'來在狀態改變時自動改變值。 – Shawn

btw'onChange'處理程序不會改變狀態，還有一些其他的功能。 – Shawn

我通過強制改變'td'的'key'來解決它，現在React不會忽略'defaultValue'這個prop。順便說一句，不應該將這種React行爲視爲一個錯誤？ – Shawn

如果value屬性被設置，我的文本輸入如何爲空？

回答

相關問題