如何以編程方式填充React的輸入字段值？

我有一些輸入字段的模態。我可以很容易地與用戶鍵入的輸入自動傳遞所述數據，在輸入字段中使用onChange函數，如如何以編程方式填充React的輸入字段值？

<Input onChange={this.props.store.handleCategoryChange} type="text" />

和..（使用mobx商店雖然irellevant）

@observable categoryValue; 
@action handleCategoryChange = (e, data) => { 
    this.categoryValue = data.value; 
    e.preventDefault(); 
};

然而，我想添加一個功能，用戶可以在應用程序中的其他位置預先填充此信息。我有數據預填充輸入字段，但我不知道如何實際輸入編程方式，沒有用戶這樣做？

我需要調用上面的handleCategoryChange函數。但我的變量將等於data.value ..這就出現了一個問題！我自己調用這個函數是不可能的，因爲我將不會有事件e也不會有一個名爲data.value的值，因爲我將「只」傳遞一個變量本身。

在其他地方使用變量，在React中自動以編程方式填充輸入字段的正確方法是什麼？我需要以某種方式調用onChange功能，但輸入的值會有所不同..

來源

2017-06-21 cbll

使用'input'元件來控制，定義與'這樣input'元件的'value'屬性：'<輸入值= {變量名} ....'每當你將更新值，自動該值將填充到輸入元素中。檢查文檔以獲取有關'受控組件'的更多詳細信息：https：//facebook.github.io/react/docs/forms.html#controlled-components –

我明白了，所以基本上有一個空變量，如果我需要編程改變？否則，讓它爲空，以便用戶可以更改它？ – cbll

剛剛嘗試過 - 像魅力一樣，感謝，只需將我的商店中的'categoryValue'綁定到值！謝啦。 – cbll

針對這種情況使用controlled component，定義input element一個value屬性是這樣的：

<Input value={variable_name} ....

每當你將更新變量，該值將自動填充到輸入元素中。

現在，您可以通過爲variable_name分配一個值來填充某個默認值，並且用戶可以通過onChange函數更新該值。

作爲每DOC：

輸入表格元素，其值由這種方式陣營控制被稱爲「控制部件」。

來源

2017-06-21 08:59:52

您可以使用受控組件並將值傳遞給它。

<input type="text" value{this.state.value} 
     onChange={()=> {this.setState({value:e.target.value })}}

來源

2017-06-21 09:17:34

<input type="text" value{this.state.value} onChange={(e) => {this.setState({value:e.target.value })}/>

來源

2017-06-21 09:31:59

如何以編程方式填充React的輸入字段值？

回答

相關問題