使用组件在 React 中传递道具时遇到问题

Question

I am trying to pass a prop and generate a simple paragraph. I am following the docs but I am not sure what I am doing wrong. I am sure the solution is utterly simple but I am just not finding it. I take an input and generate a paragraph with that dog's name. Any advice would be greatly appreciated.

import React from 'react';
import ReactDOM from 'react-dom';

class DisplayName extends React.Component{
  render() {
    return (
        <p>
          <span>{this.props.value}</span>
        </p>
      )
  }
}

class NameForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      value: ''
    };
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)

  }

  handleChange(event){
    this.setState({
      value: event.target.value
    })
  }

  handleSubmit(event){
    event.preventDefault()
    return(
      <DisplayName
        value={this.state.value}
      />
    )
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Favorite Dog Names:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input type='submit' value='Submit'></input>
        </form>
        <div>
         {this.handleSubmit}
        </div>
      </div>

    )
  }

}

ReactDOM.render(
  <React.StrictMode>
    <NameForm />
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

You're using this.handleSubmit in two different contexts: one to handle a click event, the second to render an element. This should be two separate functions since they are unrelated.

The code in the handleSubmit function:

handleSubmit(event){
  event.preventDefault()
  return(
    <DisplayName
      value={this.state.value}
    />
  )
}

should become:

handleSubmit(event){
  event.preventDefault()
  // shouldn't be returning a component
}

then, in render, this:

<div>
  {this.handleSubmit}
</div>

should become:

<div>
  <DisplayName value={this.state.value} />
</div>