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

Question

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

我有一个表单组件，我正在尝试渲染另一个组件，该组件仅在提交时从表单传递道具。截至目前，组件在 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”组件作为容器，因此将其设为智能组件的原因。

Answer 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>
      )
  }
}