input - react JSX : How to set props to placeholder attribute

Question

我有一个输入标签，我正在尝试将占位符的内容设置为组件的 Prop 。编译 JSX 并在浏览器中运行后，占位符根本不显示。它也不会抛出任何错误。我怎样才能做到这一点？

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

Answer 1

子组件中的这段代码看起来没有什么问题。当您实现它时，占位符应该显示得很好。

这是我在父级中设置它的方法:

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

回复有点晚了，但希望对你有帮助! :-)