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

Question

我正在尝试传递一个道具并生成一个简单的段落。我正在关注文档，但我不确定我做错了什么。我确信解决方案非常简单，但我只是没有找到它。我接受输入并用那只狗的名字生成一个段落。任何建议将不胜感激。

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

您在两种不同的上下文中使用this.handleSubmit：一种用于处理点击事件，另一种用于渲染元素。这应该是两个独立的功能，因为它们不相关。

handleSubmit函数中的代码：

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

应该变成：

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

然后，在渲染中，这个：

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

应该变成：

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