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

Question

I am building a form with react.js and having an issue I cannot seem to resolve. Am using the npm module prop-types for my props within the form and trying to set an inputType for a single input. I keep getting the following error:

My code for this is:

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;

I have switched between using oneOf and then oneOfType , but get the same results either way. Is there something further I should do?

Thanks much.

Answer 1

I believe you use React v16 ? You can read in their release note that they removed PropTypes from their react package.

The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow

You should directly use the prop-types library:

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 means that you expect the variable to be one of a specific prop-type, while oneOf can be any self choosen value. Here an example how both would look like.

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

I came here because i had a problem with a <input type="number" /> element. I wanted to have the value as props, but every time the user would remove default value to type in a new one i would get a warning from prop-types. As the value is now an empty string instead of any given number. The solution is to set the prop-type with oneOfTypes to accept string and number.

I hope i could help someone with this additional information with the same problem on number inputs.