React JSX：如何设置道具占位符属性

Question

我有一个输入标签，我试图将占位符的内容设置为组件的道具。在编译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} /> 
      ); 
     } 
    } 
} 

位一晚答复，但希望它帮助！ :-)