我有一个输入标签,我正在尝试将占位符的内容设置为组件的道具。在编译JSX并在浏览器中运行它之后,占位符根本不显示。它也没有抛出任何错误。我怎么能这样做?
<input type="text" onChange={this.props.handleChange} placeholder={this.props.name} />
答案 0 :(得分:6)
子组件中的此代码似乎没有任何问题。当你实现它时,占位符应该显示得很好。
以下是我在父母中设置的方式:
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} />
);
}
}
}
迟到的回复,但希望它有所帮助! :-)
答案 1 :(得分:1)
另一个答案是: 父组件
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} />
}
}