將文本輸入返回到React組件

Question

我如何在React中實現類似的功能？ 以下角度代碼來自w3schools。

 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model="firstname"> <h1>{{firstname}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; }); </script> <p>Change the name inside the input field, and the model data will change automatically, and therefore also the header will change its value.</p> </body> </html>

這是我在react中登錄頁面的代碼。我想修改它以反映用戶鍵入的用戶名。 即。 如果在“名稱”字段中鍵入“ Tyson”，則希望標題實時更新為“ Hello Tyson”。

import React from 'react';
import PropTypes from 'prop-types';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Login.css';

class Login extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
  };
  constructor(props) {
    super(props);
    this.state = {
      title: props.title,
    };
  }

  render() {
    return (
      <div className={s.root}>
        <div className={s.container}>
          <h1>
            {this.state.title}
          </h1>
          <p className={s.lead}>Log in with your Name</p>
          <form onSubmit={e => e.preventDefault()}>
            <div className={s.formGroup}>
              <label className={s.label} htmlFor="name">
                Name
              </label>
              <input
                className={s.input}
                id="name"
                type="text"
                name="name"
                autoFocus // eslint-disable-line jsx-a11y/no-autofocus
              />
            </div>
            <div className={s.formGroup}>
              <label className={s.label} htmlFor="password">
                Password:
              </label>
              <input
                className={s.input}
                id="password"
                type="password"
                name="password"
              />
            </div>
            <div className={s.formGroup}>
              <button className={s.button}>Log in</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default withStyles(s)(Login);

Answer 1

您可以發布其他組件嗎？ 您通過道具傳遞標題，但不提供此組件。 我只能猜測您正在嘗試做什么。 我不明白為什么您總是需要“ title”作為屬性，因為它始終是“ Hello，{name}”。

登錄組件：

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      password: ""
    };
  }

  changeHandler = (value, {target: {name, type}}) => {
    this.setState({[name]: value}, () => {
        console.log("Your new state is:", this.state)});
  }

  render() {
    return (
      <div className={s.root}>
        <div className={s.container}>
          <h1>
            Hello, {this.state.name}
          </h1>
          <p className={s.lead}>Log in with your Name</p>
          <form onSubmit={e => e.preventDefault()}>
            <div className={s.formGroup}>
              <label className={s.label} htmlFor="name">
                Name
              </label>
              <input
                className={s.input}
                id="name"
                type="text"
                name="name"
                value={this.state.name}
                autoFocus // eslint-disable-line jsx-a11y/no-autofocus
                onChange={this.changeHandler}
              />
            </div>
            <div className={s.formGroup}>
              <label className={s.label} htmlFor="password">
                Password:
              </label>
              <input
                className={s.input}
                id="password"
                type="password"
                name="password"
                value={this.state.password}
                onChange={this.changeHandler}
              />
            </div>
            <div className={s.formGroup}>
              <button className={s.button}>Log in</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

這是你想做的嗎？

將文本輸入返回到React組件

問題描述

1 個解決方案

解決方案1
0 2017-08-07 07:39:05

將文本輸入返回到React組件

問題描述

1 個解決方案

解決方案1 0 2017-08-07 07:39:05

解決方案1
0 2017-08-07 07:39:05