Question

我是新的反应js和使用es6 js版本的编码和材料ui。在这里，我的代码似乎是

class Components extends React.Component {


render() {

    return ( < div style = {
            styles.root
        } >
        <
        GridList cols = {
            2
        }
        padding = {
            1
        }
        cellHeight = {
            40
        }
        style = {
            styles.gridList
        } >
        <
        GridTile cols = {
            1
        }
        rows = {
            2
        } > < TextField type = "email"
        floatingLabelText = "Email Id"
        onChange = {
            this.changeValue.bind(this, 'Email')
        }
        /></GridTile >
        <
        GridTile cols = {
            1
        }
        rows = {
            2
        } > < TextField floatingLabelText = "Record Name"
        onChange = {
            this.changeValue.bind(this, 'recordname')
        }
        /></GridTile >
        <
        GridTile > < DatePicker hintText = "Start Date"
        ref = "startdate"
        mode = "landscape"
        onChange = {
            this.changeValue.bind(this, 'strtdate')
        }
        /></GridTile >
        <
        GridTile > < DatePicker hintText = "End Date"

        mode = "landscape"
        onChange = {
            this.changeValue.bind(this, 'enddate')
        }
        /></GridTile >
        <
        GridTile cols = {
            1
        }
        rows = {
            3
        } > < TextField floatingLabelText = "Sheet Type"
        onChange = {
            this.changeValue.bind(this, 'sheetname')
        }
        /></GridTile >
        <
        GridTile cols = {
            1
        }
        rows = {
            3
        } > < /GridTile> < /
        GridList > <
        /div>
    );
}}

有这样的多个输入框，我需要做必需和电子邮件验证。我在es5类型中看到了一些使用React.PropTypes.number的示例。我无法理解这一点。

Answer 1

对于验证，可以创建一个输入组件，它将接受模式作为道具。激活验证后，将在父组件Form中更新该值。 React中的一个例子可以在我的公共repo - nyanam中找到。我只是强调相关的组成部分。

反应js es6验证

1 个答案: