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

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

#1楼 票数: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} />
            );
        } 
    }
}

有点迟到的回复,但希望它有所帮助! :-)

#2楼 票数:1

另一个答案是:: Parent Component

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

  ask by astone translate from so

未解决问题?本站智能推荐:

1回复

React - inline onfocus占位符=''

我通常使用内联onfocus / blur来切换输入中的占位符文本。 像这样: 这似乎在React中不起作用,我想知道在React中处理占位符切换的“正确”方法是什么。
1回复

反应输入清除占位符

我在所有页面都有输入。 我试图在将 item.name (setSearchSchool) 发送到 handleSuggestionClick 后清除输入占位符。 如果我清除了 handleSuggestionClick 中的 setSearchSchool,我就不会进入下一页。 如何清理输入占位符
1回复

使用钩子在 Reactjs 中创建动态占位符

我想在我的input字段中创建一个动态placeholder 。 我有array的过滤器: 当前过滤器的状态(使用钩子): 用于选择过滤器的dropdown菜单: 以及带有“非动态” placeholder的input字段: 我想根据已选择的过滤器更改占位符。 我想做一个管理这个的功
4回复

如何在占位符属性中设置单个单词的样式

有没有办法在占位符属性中设置单个单词的样式? 我的营销部门要求我将占位符中的第一个单词加粗。 下面是形象营销想要实现的: 任何建议将不胜感激。
2回复

用“值”模仿“占位符”属性

我在网上找到了这个: 如您所见,它获取value属性中的文本并将其设置为default_value 。 然后,它根据默认值检查current_value 。 我遇到了问题。 在这个例子中,我们有一个像这样的元素: <input type="text" class=
1回复

设置占位符文本jQuery

我有以下工作代码,用于设置用户名和密码字段的占位符值: 和 现在,我尝试将其应用于第三个具有输入ID #memb_password_send-1-email-input框,但这不是简单的元素,它是一个输入字段,并且使用此ID(如上)显然不起作用”工作。 这是控制台的图片:
2回复

如何为输入文本设置值和占位符?

我需要为文本框添加提示。我知道它可以通过 placeholder 完成,但我还需要为同一个文本框设置值(初始值应该隐藏)。有什么办法而不是一些逻辑? 这发生在我使用 html5 和 jquery-mobile 开发移动应用程序时。我正在尝试构建一个自定义的小时和分钟选择器。 html 的 Inst
1回复

IE9 RTW是否支持输入元素的占位符属性?

一堆网站在IE9中提到支持,但我认为这是出现在Betas或RC中的东西。 它似乎在IE9最终版本中不受支持。 有人能证实吗?