React表單輸入類型中的PropType錯誤

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，以及淺層渲染器作為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-type之一，而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以接受字符串和數字。

我希望我可以為某人提供這些附加信息，同時解決數字輸入方面的問題。