2015-01-14 32 views
7

Mam znacznik wejściowy i próbuję ustawić zawartość zastępczą na rekwizyty komponentu. Po skompilowaniu JSX i uruchomieniu go w przeglądarce, symbol zastępczy nie pojawia się wcale. Nie rzuca też żadnych błędów. Jak mogę to zrobić?React JSX: Jak ustawić rekwizyty do atrybutu placeholder

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

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

+0

dziękuję! Niepoprawnie ustawiałem rekwizyty. – astone

Odpowiedz

4

Wygląda na to, że ten kod jest niepoprawny w komponencie potomnym. Symbol zastępczy powinien wyglądać dobrze, gdy go zaimplementowano.

Oto jak mam go ustawić w dominującej:

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> 
     ); 
    } 
} 

Oto jak wyświetlić go w dziecko:

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} /> 
      ); 
     } 
    } 
} 

Trochę późno odpowiedzi, ale mam nadzieję, że pomoże! :-)