将道具从孩子传递给父母不工作（反应）

Question

I have child component with <form> Value from input. Needs to be passed and rendered in parent component. has onSubmit method which works in child, but doesn't seem to work in parent component. What is wrong here?

I am trying to render value of <input> (child) in <h1> (parrent).

Child.js

   state = {
     title : ''
   }
  onSubmit = (e) => {
    e.preventDefault();
    this.props.textChange(this.state.title);
    this.setState({ title: '' });
  };

   onChange = (e) => this.setState({ title: e.target.value });


  render() {
    return (
      <div>
      <form 
        onSubmit={this.props.onSubmit}>
        <input 
          type="text" 
          name="title"
          placeholder="your tex here..."
          value={this.state.title}
          onChange={this.onChange}
        />

        <input 
        type="submit"
        value ="Submit"
        />
        </form>
      </div>
    )
  }
}
export default Text

Parent.js

class App extends Component {
  state = {
    colors: [],
    text: 'title'
  };

textChange = (title) => {
  console.log(title);
  this.setState({ text: title });
}

 return (
    <div className="App">
      <h1 className="title">{this.state.text}</h1>
      <Text textChange={this.textChange}/>
    </div>

Answer 1

props are used to access parent method/values

change {this.props.onSubmit} to {this.onSubmit} as onSubmit is a method of the child

Answer 2

Remove props from onSubmit={this.props.onSubmit} . Props are used to access data from the parent. In this case, the onSubmit function is local to the Child.js file, not the Parent.js file.

state = {
  title: ''
}
onSubmit = (e) => {
  e.preventDefault();
  this.props.textChange(this.state.title);
  this.setState({
    title: ''
  });
};

onChange = (e) => this.setState({
  title: e.target.value
});


render() {
  return ( <
    div >
    <
    form onSubmit = {
      this.onSubmit // REMOVED .props
    } >
    <
    input type = "text"
    name = "title"
    placeholder = "your tex here..."
    value = {
      this.state.title
    }
    onChange = {
      this.onChange
    }
    />

    <
    input type = "submit"
    value = "Submit" /
    >
    <
    /form> < /
    div >
  )
}
}
export default Text

Answer 3

You are trying to call onSubmit method from props, having this method in child component. Instead you should call it directly on this object. Like this:

<form 
  onSubmit={this.onSubmit}>

Answer 4

you are accessing props which is not being passed to child component, you should change the the this.props.onSubmit to this.onSubmit.

state = {
     title : ''
   }
  onSubmit = (e) => {
    e.preventDefault();
    this.props.textChange(this.state.title);
    this.setState({ title: '' });
  };

   onChange = (e) => this.setState({ title: e.target.value });


  render() {
    return (
      <div>
      <form 
        onSubmit={this.onSubmit}>
        <input 
          type="text" 
          name="title"
          placeholder="your tex here..."
          value={this.state.title}
          onChange={this.onChange}
        />

        <input 
        type="submit"
        value ="Submit"
        />
        </form>
      </div>
    )
  }
}
export default Text