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

【问题标题】：PropType error in React form input typeReact 表单输入类型中的 PropType 错误
【发布时间】：2017-11-07 00:06:02
【问题描述】：

我正在使用 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 之间切换，但无论哪种方式都得到相同的结果。我还有什么需要做的吗？

非常感谢。

【问题讨论】：

标签： javascript node.js reactjs prop react-proptypes

【解决方案1】：

我相信你使用 React v16 ？您可以在他们的发行说明中看到他们从 react 包中删除了 PropTypes。

15.x 中引入的弃用已从核心中删除包裹。 React.createClass 现在可以作为 create-react-class 使用， React.PropTypes 作为 prop-types，React.DOM 作为 react-dom-factories， react-addons-test-utils 作为 react-dom/test-utils 和浅渲染器作为 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,
};

【讨论】：

是的，我的问题是我添加了prop-types 库，但仍然有React.PropTypes 而不仅仅是PropTypes。

【解决方案2】：

oneOfType 表示您希望变量是特定道具类型之一，而oneOf 可以是任何自选值。以下是两者的外观示例。

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

我来到这里是因为我遇到了 <input type="number" /> 元素的问题。我想将值作为道具，但每次用户删除默认值以输入新值时，我都会收到道具类型的警告。因为该值现在是一个空字符串，而不是任何给定的数字。解决方法是设置prop-type为oneOfTypes接受字符串和数字。

我希望我可以帮助那些在数字输入上遇到同样问题的人。

【讨论】：