子组件使用 onChange()，更新父组件

Question

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

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

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

请你可以看看里面的这段代码：

** 输入.js **

 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;

** SignInUp.js（控制器）**

 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;

Answer 1

• 在您的实现中， Sign类不知道Input类的value 。
• 输入类可以在没有状态的情况下实现。
• 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

这个演示有帮助吗？