我正在嘗試創建一個出現在模式中的窗體。所以當用戶輸入一個值時,該值就存儲在本地存儲器中。這裏有一個圖片,幫助的你明白我的意思:
這裏是形式的代碼:如何在react-bootstrap表單中使用「refs」獲取輸入值?
function FieldGroup({id, label, help, ...props}) {
return (
<ReactBootstrap.FormGroup controlId={id}>
<ReactBootstrap.ControlLabel>{label}</ReactBootstrap.ControlLabel>
<ReactBootstrap.FormControl {...props} />
{help && <ReactBootstrap.HelpBlock>{help}</ReactBootstrap.HelpBlock>}
</ReactBootstrap.FormGroup>
);
}
const formInstance = (
<form>
<FieldGroup
id="formControlsText"
type="text"
label="Text"
placeholder="Recipe Name"
inputRef={ref => { this.input = ref; }}
/>
<ReactBootstrap.FormGroup controlId="formControlsTextarea">
<ReactBootstrap.ControlLabel>Ingredients</ReactBootstrap.ControlLabel>
<ReactBootstrap.FormControl componentClass="textarea" placeholder="Enter Ingredients" />
</ReactBootstrap.FormGroup>
</form>
);
正如我在引導讀過陣營教程中,我要補充
<FormControl inputRef={ref => { this.input = ref; }} />
到FormControl道具。但加入之後,我得到一個錯誤調用模式窗體時:
它不會改變任何東西,同樣的錯誤。我認爲問題在於**「您不能在功能組件上使用ref屬性,因爲它們沒有實例。」** –
您可以在**功能無狀態組件上使用'ref'屬性**:https: //www.robinwieruch.de/react-ref-attribute-dom-node/ –