2015-01-14 21 views
7

入力タグがあり、プレースホルダの内容をコンポーネントの小道具に設定しようとしています。 JSXをコンパイルしてブラウザで実行した後、プレースホルダはまったく表示されません。また、エラーを投げていません。これどうやってするの?React JSX:小道具をプレースホルダ属性に設定する方法

<input type="text" onChange={this.props.handleChange} placeholder={this.props.name} /> 
+2

jsbin - http://jsbin.com/yepufugige/4/edit – filipemgs

+0

ありがとう!私は小道具を間違ってセットしていた。 – astone

答えて

4

子コンポーネントでこのコードに問題はないようです。プレースホルダは、実装したときにうまく表示されるはずです。ここで

私はそれが親に設定されている方法である:ここでは

import React, { Component } from 'react'; 
import Title from'./Title'; 
import TestList from'./TestList'; 

export default class Layout extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      title: 'Moving Focus with arrow keys.', 
      placeholder:'Search for something...' 
     }; 
    } 

    render() {  
     return (
      <div > 
       <Title title={ this.state.title } /> 
       <p>{ this.getVal() }</p> 
       <TestList placeholderText={this.state.placeholder} /> 
      </div> 
     ); 
    } 
} 

は、私が子供にそれを表示する方法です:返事が遅れの

import React, { Component } from 'react'; 

export default class TestInput extends Component { 
    constructor(props){ 
     super(props); 
    }; 

    render() { 
     return (
      <div> 
       <input type="search" placeholder={this.props.placeholderText} /> 
      ); 
     } 
    } 
} 

ビットそれが役に立てば幸い! :-)

関連する問題