Réagir JSX: Comment fixer des accessoires à l'espace réservé de l'attribut

J'ai une balise input et je suis en train de définir l'espace réservé de contenu du composant d'accessoires. Après la compilation JSX et en l'exécutant dans le navigateur, l'espace n'est pas à tous. C'est aussi de ne pas jeter de toutes les erreurs. Comment puis-je faire cela?

<input type="text" onChange={this.props.handleChange} placeholder={this.props.name} />
jsbin - jsbin.com/yepufugige/4/edit
merci!!!! J'ai été paramètre mes accessoires de manière incorrecte.

OriginalL'auteur astone | 2015-01-14

  1. 6

    Il semble y avoir rien de mal avec ce code dans le composant enfant. L'espace réservé doit se présentent très bien, comme vous l'a mise en œuvre.

    Voici comment je l'ai mis dans le parent:

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

    Voici comment je l'affiche de l'enfant:

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

    Peu de retard de réponse, mais j'espère que ça aide! 🙂

    OriginalL'auteur edlee

  2. 1

    Une autre réponse serait::
    Composant Parent

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

export default class DummyComponent extends Component {
    constructor() {
        super();
        this.state = {

        };
    }

    render() {    
        return <TextView placeholder = {"This is placeholder"} />
    }
}

    Enfant Componet

    import React, { Component } from 'react';

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

    render() {
        const { placeholder } = this.props;
        return <input type="text" placeholder = {placeholder} />
    }
}

    OriginalL'auteur Rahul Kumar