React中输入占位符属性的例子

占位符是显示在表单的输入控件中的一段文本。这是在Html5中引入的。理想情况下，这些可以用来在表单处理中获得更好的用户体验。让我们在Html5中声明占位符

<input type="text" placeholde="placeholder text">

占位符属性可以被定义为输入表单控件，如文本，文本区域和选择。

你可以查看我以前的文章。

本教程包括以下例子的解释

如何从react props动态地改变占位符文本

当你设计可重复使用的输入组件（如文本控件）时，你需要将占位符文本从父组件传递给子组件。在这个例子中，占位符文本是通过react props对象从父组件传到子组件的。

让我们定义名为TextControl.js的子组件

import React, { Component } from 'react';

export default class TextControl extends Component {
    constructor(props) {
        super(props);
    };

    render() {
        const { name, placeholderString } = this.props.data;
        return 
    }
}

在父组件中 - InputForm.js使用TextControl组件。

在父组件中,

• 占位符文本和名称在状态对象中被初始化为输入控件的名称和占位符文本

• 名称和占位符作为道具被传递给TextControl组件。

• 在TextControl组件中，从道具中读取这些值并将这些值分配给输入组件。

• 这就是道具值是如何动态更新到占位符文本的。

  name={name} 
  placeholder={placeholderString} 
  

以下是完整的组件代码

import React, { Component } from 'react';
import TextControl from './TextControl';

export default class InputForm extends Component {
    constructor() {
        super();
        this.state = {
            name: 'email',
            placeholder: 'Please enter email'
        };
    }

    render() {
        return 
    }
}

在反应中改变输入占位符文本的颜色样式

改变占位符的颜色并不简单，因为占位符是一个非标准的实现。

placeholder css伪类可以改变输入表单控件中显示的默认文本的样式。它有不同的供应商实现，你需要单独声明它。

为样式创建一个style.css文件

/* for Opera,webkit chrome browsers */
input::-webkit-input-placeholder { 
    color: red;
}
/*firefox 19+ versions*/
input::-moz-placeholder {
    color: red;
}
/*IE  versions*/
input::-ms-placeholder {
    color: red;
}
/*Latest modern browsers */

input::placeholder {
    color: red;
}

import React, { Component } from 'react';
import "../index.css"
export default class TextControl extends Component {
    constructor(props) {
        super(props);
    };

    render() {
        const { name, placeholderString } = this.props;
        return 
    }
}

在react中为输入占位符添加font awesome图标

这个例子是在一个输入表单的占位符文本中添加font awesome图标。

首先，使用npm命令在应用程序中安装font-awesome依赖项

npm install --save font-awesome

接下来，在index.js或你的组件中加入fonttawesome css文件。

import '../node_modules/font-awesome/css/font-awesome.min.css';

最后，在一个组件中，在占位符文本中添加fontawesome图标的unicode。

import React, { Component } from 'react';
import "../index.css"
export default class IconINput extends Component {
  
    render() {
        return 

    }
}

在样式文件index.css中添加以下字体:

input {
    font-family: FontAwesome;
}

输出: