在 React 中提交表单时渲染数据

Posted 2023-02-23

【中文标题】在 React 中提交表单时渲染数据

【英文标题】：Render Data From Form on Submission in React

【发布时间】：2018-06-19 06:39:24

【问题描述】：

不知道我在这里做错了什么 - 这应该很简单，但我找不到我正在寻找的信息。

我有一个表单组件，我正在尝试渲染另一个组件，该组件仅在提交时从表单传递道具。截至目前，组件在 handleChange 上重新渲染，但不等待 handleSubmit。

class UserInfo extends React.Component 
  constructor(props) 
    super(props)
    

    render() 
        return (
        <div>
          <h4>this.props.name</h4>
        </div>
      )
    
 

class SearchForm extends React.Component 
    constructor(props) 
        super(props)
      this.state = name: ''

    this.handleChange= this.handleChange.bind(this);
    this.handleSubmit= this.handleSubmit.bind(this); 
     

  handleChange(event) 
      this.setState( name: event.target.value )
       

   handleSubmit(event) 
    event.preventDefault(); 
        this.setState( name: this.state.name)
        alert(this.state.name + ' was submitted');
    

    renderUserInfo() 
        return <UserInfo name=this.state.name />
          

    render() 
    return (
        <div>
        <form onSubmit=this.handleSubmit>
          <label>
            Username: 
            <input type="text" name=this.state.name onChange=this.handleChange />
          </label>
          <input type="submit" value="Submit" />
        </form>
       this.renderUserInfo()
      </div>
      )
  

值得注意的是，这是我的问题的简化版本，我最终需要将“UserInfo”组件作为容器，因此将其设为智能组件的原因。

【问题讨论】：

“不等待handleSubmit”是什么意思？

对不起，我应该说得更好——我已经筋疲力尽了。基本上，我可以在handleChange函数上获得UserInfo渲染和更新，但我想阻止它在handleSubmit之前渲染任何东西，当我调用handleSubmit时，道具似乎被重置，因为我可以让它提醒提交的内容但是渲染用户信息消失。

组件将随着状态的改变而重新渲染。这就是渲染 UserInfo 的原因。

【参考方案1】：

由于您正在更新 name onChange，因此反应会重新渲染整个组件。您可以使用submitted 标志来检查信息是否已提交。

class SearchForm extends React.Component 
    constructor(props) 
        super(props)
      this.state = 
       name: '',
       submitted: false 

    this.handleChange= this.handleChange.bind(this);
    this.handleSubmit= this.handleSubmit.bind(this); 
     

  handleChange(event) 
      this.setState( name: event.target.value )
       

   handleSubmit(event) 
    event.preventDefault(); 
        this.setState( submitted: true )
        alert(this.state.name + ' was submitted');
    

    renderUserInfo() 
        return <UserInfo name=this.state.name />
          

    render() 
    return (
        <div>
        <form onSubmit=this.handleSubmit>
          <label>
            Username: 
            <input type="text" name=this.state.name onChange=this.handleChange />
          </label>
          <input type="submit" value="Submit" />
        </form>
       this.state.submitted && this.renderUserInfo()
      </div>
      )
  

【讨论】：

昨晚试过这个和类似的东西。它会阻止文本在 handleChange 上呈现，并在提交时接收正确的输入，但不会在屏幕上呈现任何内容。

这是正确的。不错。