web-dev-qa-db-ja.com

React JSX：プレースホルダー属性に小道具を設定する方法

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

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

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

親で設定する方法は次のとおりです。

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

少し遅い返信ですが、それが役立つことを願っています！ :-)

6
edlee

別の答えは::親コンポーネント

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

子コンポーネント

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