ログインフォームを実装するためのReactサンプルコード

'react' から React をインポートします。
「antd」から { Input、Button、message } をインポートします。
'@ant-design/icons' から { UserOutlined、LockOutlined、EyeInvisibleOutlined、EyeTwoTone } をインポートします。
'./index.less' をインポートします
クラスLoginはReact.Componentを拡張します{
 コンストラクタ(props) {
 スーパー(小道具)
 この状態 = {
 ユーザー名: ''、
 パスワード: ''
 }
 };
 送信=()=>{
 if (this.state.username !== '' && this.state.password !== '') {
 this.props.history.push('/Index')
 } それ以外 {
 message.error("ユーザー名とパスワードは空にできません")
 }
 };
 ユーザー変更=(e)=>{
 this.setState({
 ユーザー名: e.target.value
 })
 }
 パスワード変更=(e)=>{
 this.setState({
 パスワード: e.target.value
 })
 }
 与える （） {
 const {ユーザー名、パスワード} = this.state
 戻る （
 <div className="ログイン">
  <入力
  値={ユーザー名}
  onChange={this.user_change}
  サイズ="大"
  プレースホルダー="ユーザー名"
  プレフィックス={<UserOutlined />}} />
  <パスワードを入力してください
  値={パスワード}
  onChange={this.password_change}
  サイズ="大"
  クラス名="ログイン__入力"
  プレースホルダー="パスワード"
  プレフィックス={<LockOutlined />}
  iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
  />
  <ボタン
  クラス名="login__btn"
  サイズ="大"
  タイプ="プライマリ"
  onClick={this.submit}
  >
  ログイン</Button>
 </div>
 );
 }
}  
デフォルトのログインをエクスポートします。