在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，因此react會重新呈現整個組件。 您可以使用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>
      )
  }
}