Question

现在我正在处理一个表示表单输入字段的输入组件。我希望它是通用的（比如文本，日期和数字）。到目前为止的问题是我不知道如何将未知属性直接传递给我的输入元素以下是代码：

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Input extends Component {
    render () {
      let required = false
      if (this.props.required) {
        required = true
      }
      return (
        <div className='form-group'>
          <label>{ this.props.label }</label>
          <input 
            type={this.props.type} 
            name={this.props.name}
            value={this.props.value} 
            placeholder={this.props.placeholder}
            className={this.props.className} 
            onChange={this.props.handleChange}
            {this.props.attrs}  // error here
            required = {required} 
          />
        </div>
      )
    }
}

Input.propTypes = {
  attrs: PropTypes.string,
  label: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  placeholder: PropTypes.string,
  className: PropTypes.string,
  handleChange: PropTypes.func.isRequired,
  required: PropTypes.bool
}

Input.defaultProps = {
  type: 'text',
  required: true
}

export default Input

当我将this.props.attrs元素直接插入input元素并且我不知道该怎么做时，它会拒绝this.props.attrs ...

为什么我甚至需要this.props.attrs？

我不知道将来我可能想要使用哪种输入类型。让我们说我想要一个数字输入。在这种情况下，min = '1' max = '100'我可以存储this.props.attrs字符串。

因此，当我将<input ... min = '1' max = '100' ... />传递给组件时，我希望得到如下输入：

    dealer: dealer.o readline.o car.o
        gcc -o dealer readline.o car.o

    dealer.o: dealer.c car.h readline.h
        gcc -c dealer.c

    readline.o: readline.c car.h readline.h
        gcc -c readline.c

    car.o: car.c car.h readline.h
        gcc -c car.c

make dealer
gcc -c dealer.c
gcc -c readline.c
gcc -c car.c
gcc -o dealer readline.o car.o
/usr/lib/gcc/x86_64-redhat-linux/4.4.7/../../../../lib64/crt1.o: In function `_start':
(.text+0x20): undefined reference to `main'
collect2: ld returned 1 exit status
make: *** [dealer] Error 1

Answer 1

您应该使用object spread {...this.props.attrs}
请注意，这是一项提案，目前正处于第3阶段。

这是一个正在运行的例子：

＆＃13;

class MyInput extends React.Component {
  render() {
    const { title, ...restOfProps } = this.props;
    return (
      <div>
        <label>{title}</label>
        <input {...restOfProps} />
      </div>
    );
  }
}

ReactDOM.render(<MyInput title="password" type="password" style={{border:'3px solid green', margin:'0 5px'}} />, document.getElementById("root"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 2

这里要提几件事：

您需要传播rest属性
将attr设置为PropTypes
如果你想制作一些道具required，那么这个实现很好，但是如果你不这样做，那么你可以消除PropTypes限制并重构组件只获得

{label, ...rest} = this.props;

＆＃13;

let { PropTypes, Component } = React;

class Input extends Component {
 render () {
    let { required, label, handleChange, ...restOfattrs } = this.props;
    required = required ? required : false;
      
      return (
        <div className='form-group'>
          <label>{label}</label>
          <input
          onChange={handleChange}
          {...restOfattrs}
          required={required} /> 
        </div>
      )
    }
}

Input.propTypes = {
  attrs: PropTypes.object,
  label: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  placeholder: PropTypes.string,
  className: PropTypes.string,
  handleChange: PropTypes.func.isRequired,
  required: PropTypes.bool
}

Input.defaultProps = {
  type: 'text',
  required: true
}

ReactDOM.render(
  <Input label="Type password : " className="input" type="password" placeholder="Type Password" handleChange={() => console.log('change...')}  maxLength={4} />,
  document.getElementById("root")
);

＆＃13;

.input{
    border: 1px solid #a1a1a1;
    padding: 10px 40px; 
    background: #e7e7e7;
    width: 100px;
    border-radius: 5px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"> </div>

＆＃13;

将道具作为未知属性传递给React

2 个答案: