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

Question

I have three components, one controller, and two childrens of this controller. For this problem we need a controller and one children (his name is : Input.js)

So, I expose the problem. In my Input.js I call the onChange() method and updated inside of this file the state and in my controller I passing a props for recover the the state in my children.

But I have an error this.props.myName is not a function

Please you can take a look of this code inside :

** Input.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 (Controller) **

 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

• In your implmentation, the Sign class doesn't know the value of of Input classes.
• Input class can be implemented without state.
• The setState shouldn't use itself to update, you can use prevState , but it doesn't need in this case. https://reactjs.org/docs/react-component.html#setstate
• Fragement doesn't do anything, so it doesn't need to be there, since it already has a div wrapper.

There is an example based on your code:

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

There is the codesandbox for this demo: https://codesandbox.io/s/k01mvwroq5

Does this demo help?