将文本输入返回到React组件

Question

How I can achieve the similar functionality in React? 我如何在React中实现类似的功能？ The following angular code is from w3schools. 以下角度代码来自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>

Here is my code for the login page in react.I want to Modify this to reflect the User's name as they type. 这是我在react中登录页面的代码。我想修改它以反映用户键入的用户名。 ie. 即。 if I type "Tyson" in the "name" field, I want the title to update in real time to "Hello Tyson". 如果在“名称”字段中键入“ 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

Could you post your other component? 您可以发布其他组件吗？ You pass down a title via props, but don't provide this component. 您通过道具传递标题，但不提供此组件。 I can only guess what you are trying to do. 我只能猜测您正在尝试做什么。 I don't see why you would need "title" as an attribute, given that it's always "Hello, {name}". 我不明白为什么您总是需要“ title”作为属性，因为它始终是“ Hello，{name}”。

Login Component: 登录组件：

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>
    );
  }
}

Is this what you want to do? 这是你想做的吗？

将文本输入返回到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