Question

我想使用道具创建动态输入组件

这是App.js文件

<TextBox type="text" style="singIn" placeholder="hi there" />
<TextBox type="password" style="singUp" />

这是TextBox.js文件

import React, { Component } from 'react'

class TextBox extends Component {

    constructor(props) {
      super(props)
    }

    render() {
        const {type, value, ...other} = this.props
        return (
            <div>
                <input type={type} value={value} {...other} />
            </div>
        )
    }
}

export default TextBox

Answer 1

您可以使用状态来动态设置值，而不是使用道具。

或

您可以使用state将值设置为props。这样，如果您更改状态值，则props值也会自动更改。

Answer 2

您在正确的轨道上！

在TextBox中，您可以使用render()方法将props的全部传递给<input>，使用{ {3}}运算符。这会将所有props作为键值对传递。因此，您可以这样做：

<input {...this.props} />

基本上可以做到：

<input type={this props.type}
       value={this.props.value}
       placeholder={this props.placeholder}

       // and so on for every single key-value pair you have in props

       />

但是，有一个小问题。如果您通过style作为道具，则必须为Object spread。也就是说，您不能将“ signIn”或“ signUp”（仅仅是字符串）作为style传递。也许您的意思是将它们作为class道具传递（即，将输入的CSS类设置为“ signIn”或“ signUp”）。

这里是"a JavaScript object with camelCased properties"，它演示了如何使用对象展开运算符将所有道具传递给子input。

如何在输入栏中动态设置道具

2 个答案: