2017-09-18 18 views
2

こんにちは私は反応して還元するのが新しいです。私がしようとしているのは、サーバーから値を取得し、ユーザーが値を編集できるように入力値に配置する編集ページがあることです。デフォルト値を設定するにはどうすればいいですか

<FormGroup> 
    <Label htmlFor="name">Name *</Label> 
    <div className="controls"> 
     <InputGroup> 
      <Input id="name" size="16" type="text" value={this.props.user.name} /> 
     </InputGroup> 
    </div> 
</FormGroup> 

反応成分の内部。

constructor(props) { 
    super(props) 
    this.handleSubmit = this.handleSubmit.bind(this) 
    this.componentWillMount = this.componentWillMount.bind(this) 
} 

componentWillMount(){ 
    // this will return my current user 
    this.props.dispatch(fetchUser()) 
    console.log(this.props.user.name) //outputs 'John' 
} 

入力にユーザー名を挿入するにはどうすればよいですか。私はIDとすべての伝統的なJavaScriptの方法を使用してみましたが、動作しません。

+0

'値{this.props.user.name}' '値= {this.props.userでなければなりません。名前} ' – bennygenel

+0

あなたはreduxを使用しているので、reduxを使用してreduxストアのどこかにフェッチされたユーザーを保存してから、コンポーネントのmapStateToPropsを使用してユーザーを取得する必要があります – wakwak

答えて

0

反応したブートストラップのようです。
以下サンプル使用defaultValueプロパティ。あなたは...

<FormControl 
      type="text" 
      autoFocus 
      onBlur={this.handleMessage} 
      defaultValue={this.props.user.name} 
/>   

ハンドラによって、入力値を処理したい場合は は

handleMessage = (event) => { 
    this.setState({ 
    userName: event.target.value, 
    }); 
    // or do action 
    // this.props.dispatch(notifyAction.changeUserName(event.target.value)); 
}; 
関連する問題