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

Posted 2023-02-23

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

【英文标题】：having trouble passing a prop in React using a component

【发布时间】：2020-09-07 13:17:27

【问题描述】：

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

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

【参考方案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>

【讨论】：

完全有道理！我现在明白了。我唯一的问题是我输入的名称只是在我输入时显示出来，而不是在提交时显示。我想我试图使用handleSubmit 让它仅在提交时激活。您能否指出我在提交时如何显示名称的正确方向？

在handleSubmit 方法中，您可以设置一个状态值（例如：this.setState( submitted )，或使用钩子），然后在您的渲染方法中将其替换为this.state.submitted && <DisplayName value=this.state.value />，它应该只渲染一旦提交。