web-dev-qa-db-fra.com

React JSX: comment définir les accessoires sur l'attribut d'espace réservé

J'ai une balise d'entrée et j'essaie de définir le contenu de l'espace réservé sur les accessoires du composant. Après avoir compilé JSX et l'avoir exécuté dans le navigateur, l'espace réservé ne s'affiche pas du tout. Il ne lance également aucune erreur. Comment puis-je faire ceci?

<input type="text" onChange={this.props.handleChange} placeholder={this.props.name} />
inputreactjsplaceholderreact-jsx
11
astone

Il ne semble y avoir rien de mal avec ce code dans le composant enfant. L'espace réservé devrait apparaître très bien, comme vous l'avez implémenté.

Voici comment je l'ai défini 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 chez 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} />
            );
        } 
    }
}

Un peu de réponse tardive mais j'espère que ça aide! :-)

6
edlee

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"} />
    }
}

Composant enfant

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} />
    }
}
0
Rahul Kumar