入力した値を表示してみよう
入力テキストボックスで入力した値を動的に画面に表示します。
画面イメージ
ソース
m04_InputOutput.cmp
<aura:component implements="force:appHostable">
<aura:attribute name="target" type="String" default="world"/>
<h1>Hello, {!v.target}!</h1>
<ui:inputText aura:id="input" label="名前" value=""/>
<ui:outputText aura:id="output" value=""/><br/>
<ui:button aura:id="submit" label="設定" press="{!c.set}"/>
</aura:component>
m04_InputOutputController.js
({
set: function(component, event, helper) {
// 入力コンポーネントから属性値取得
var inputValue = component.find("input").get("v.value");
// 入力コンポーネントへ属性値セット
var output = component.find("output");
output.set("v.value", inputValue);
// コンポーネントの属性値取得(仕組みを把握するためのコードでこの変数"target"は利用しない)
var target = component.get("v.target");
// コンポーネントの属性値セット
component.set("v.target", inputValue);
}
})
ポイント
入力コンポーネントの値の取得と設定
コンポーネントから入力コンポーネントの参照を取得し"v.value"でアクセスします。
コンポーネントの属性値の取得と設定
コンポーネントの参照から"v.<属性名>"でアクセスします。
補足
- P86 入力コンポーネントの概要
- P156 DOMへのアクセス、JavaScriptでの属性値操作
