Question

我正在使用react.js构建一个表单并且遇到一个我似乎无法解决的问题。我使用npm模块prop-types作为表单中的道具，并尝试为单个输入设置inputType。我一直收到以下错误：

我的代码是：

import React from 'react';
import PropTypes from 'prop-types';

const SingleInput = (props) => (
    <div className="form-group">
        <label className="form-label">{props.title}</label>
        <input
            className="form-input"
            name={props.name}
            type={props.inputType}
            value={props.content}
            onChange={props.controlFunc}
            placeholder={props.placeholder} />
    </div>
);



SingleInput.propTypes = {
    inputType: React.PropTypes.oneOfType(['text', 'number']).isRequired,
    title: React.PropTypes.string.isRequired,
    name: React.PropTypes.string.isRequired,
    controlFunc: React.PropTypes.func.isRequired,
    content: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
    ]).isRequired,
    placeholder: React.PropTypes.string,
};

export default SingleInput;

我已经在使用oneOf和oneOfType之间切换，但无论如何都会获得相同的结果。还有什么我应该做的吗？

非常感谢。

Answer 1

我相信你使用React v16？您可以在发布说明中读取他们已从PropTypes包中删除react。

15.x中引入的弃用已从核心中删除包。 React.createClass现在可用作create-react-class， React.PropTypes作为prop-types，React.DOM作为react-dom-factories， react-addons-test-utils作为react-dom / test-utils和浅渲染器 as react-test-renderer / shallow

您应该直接使用prop-types库：

SingleInput.propTypes = {
    inputType: PropTypes.oneOfType(['text', 'number']).isRequired,
    title: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    controlFunc: PropTypes.func.isRequired,
    content: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
    ]).isRequired,
    placeholder: PropTypes.string,
};

Answer 2

oneOfType表示您希望变量是一种特定的prop类型，而oneOf可以是任何自行选择的值。这是一个示例，两者看起来如何。

Game.propTypes = {      
  gameStatus: PropTypes.oneOf(['new_game', 'playing', 'finished']).isRequired,
  roundsToPlay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
}

我之所以来到这里是因为我对<input type="number" />元素有疑问。我希望将值用作道具，但是每次用户删除默认值以键入新值时，道具类型都会发出警告。由于该值现在是一个空字符串，而不是任何给定的数字。解决方案是使用oneOfTypes设置prop-type以接受字符串和数字。

我希望我可以为有人提供此附加信息的人在输入数字时遇到同样的问题。

React表单输入类型中的PropType错误

2 个答案: