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

Posted 2023-02-22

【中文标题】React JSX：如何将道具设置为占位符属性

【英文标题】：React JSX: How to set props to placeholder attribute

【发布时间】：2015-03-13 02:33:59

【问题描述】：

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

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

【问题讨论】：

jsbin - jsbin.com/yepufugige/4/edit

谢谢！我的道具设置不正确。

【参考方案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 />
    

【参考方案2】：

子组件中的这段代码似乎没有任何问题。占位符应该会很好地显示出来，就像您实现它一样。

这是我在父级中设置的方式：

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

回复有点晚，但希望对您有所帮助！ :-)