Question

我有三个组件，一个控制器和两个控制器的子节点。对于这个问题，我们需要一个控制器和一个孩子（他的名字是：Input.js）

所以，我揭露了这个问题。在我的Input.js中，我调用了onChange()方法，并在此文件中更新了状态，在我的控制器中，我传递了一个道具来恢复我孩子的状态。

但我有一个错误this.props.myName is not a function

请你可以看一下这段代码：

** Input.js **

＆＃13;

import React, { Component, Fragment } from "react";

class Input extends Component {

  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      email: "",
      password: ""
    };

  _handleChange(pEvt) {
    if (pEvt.target.type === "email" && pEvt.target.value.length >= 6) {
      this.setState({
        email: pEvt.target.value
      });
    } else {
      this.setState({
        password: pEvt.target.value
      });
    }
  }
  
  render() {
    const { type, placeholder } = this.props;
    return (
      <Fragment>
        <div className="form__group">
          <input
            className="form__input"
            type={type}
            placeholder={placeholder}
            ref={input => (this.refInput = input)}
            onChange={pEvt => {
              this._handleChange(pEvt);
            }}
          />
        </div>
      </Fragment>
    );
  }
}

export default Input;

＆＃13;

** SignInUp.js（Controller）**

＆＃13;

import React, { Component } from "react";
import Header from "./../Header/Header";
import Input from "./../Input/Input";
import Submit from "./../Input/Submit";
import "./_SignInUp.scss";

class sign extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: []
    };
  }

  _inputValue = email => {
    this.setState({
      input: [...this.state.input, email]
    });
  };

  render() {
    return (
      <div className="sign">
        <Header />
        <form className="form">
          <Input
            inputValue={this._inputValue}
            type="email"
            placeholder="Email"
          />
          <Input type="password" placeholder="Password" />
          <div className="form__submit">
            <Submit name="Sign in" to="/profile" />
            <Submit name="Sign Up" to="/" />
          </div>
        </form>
      </div>
    );
  }
}

export default sign;

＆＃13;

Answer 1

在您的实施中，Sign课程不知道value课程的Input。
输入类可以在没有状态的情况下实现。
setState不应使用自身进行更新，您可以使用prevState，但在这种情况下不需要。 https://reactjs.org/docs/react-component.html#setstate
Fragement没有做任何事情，所以它不需要在那里，因为它已经有一个div包装器。

根据您的代码有一个例子：

class Input extends Component {
  _handleChange = event => {
    this.props.onChang(event.target.value);
  }

  render() {
    const { type, placeholder, value } = this.props;
    return (
      <div className="form__group">
        <input
          className="form__input"
          type={type}
          placeholder={placeholder}
          onChange={this._handleChange}
          value={value}
        />
      </div>
    );
  }
}

class SighUp extends Component {
  state = {
    email: '',
    password: '',
  };

  render() {
    return (
        <form>
          <Input
            type="email"
            placeholder="Email"
            value={this.state.email}
            onChang={val => { this.setState({ email: val }); }}
          />
          <Input
            type="password"
            placeholder="Password"
            value={this.state.password}
            onChang={val => { this.setState({ password: val }); }}
          />
          <button onClick={e => { e.preventDefault(); console.log(this.state); }}>Console log</button>
        </form>
    );
  }
}

此演示有代码框：https://codesandbox.io/s/k01mvwroq5

这个演示有帮助吗？

使用onChange（）的子组件，更新父组件

1 个答案: