如何对未经授权的用户隐藏表单

时间:2018-07-31 08:47:46

标签: reactjs react-redux

向页面添加信息的表单不管用户是否被授权都可以使用,如何隐藏未授权用户的表单? 未经授权的用户无法使用该表格,但该表格仍对他可见。

index.js

import React, { Component }       from 'react';
import HolidayItemsList           from './holidays/holidays_list'
import HolidaysForm               from './holidays/holidays_form'

export default class Holidays extends Component {
  render() {
    return (
      <div>
        <h3>Holidays</h3>

        <HolidayItemsList />

        <HolidaysForm />
      </div>
    );
  }
}

index_form.js

........

  render() {
    return (
      <div className='col-sm-4'>
        <Formsy.Form onSubmit={ this.handleSubmit.bind(this) }>
          <div className="form-group">
            <label for="name">Name:</label>
            <input
              onChange={ this.handleChange.bind(this, 'name') }
              className="form-control"
              id="name"
              required
            />
          </div>

          <div className="form-group">
            <label for="date">Date:</label>
            <FormDatePicker
              handleChange={ this.handleChange.bind(this) }
              selected={ this.state.item.date }
              name="date"
              required
            />
          </div>

          <button
            type="submit"
            className="btn btn-primary"
          >Submit</button>
        </Formsy.Form>
      </div>
    );
  }
}

0 个答案:

没有答案