React - 提交表单时显示新组件答案

【问题标题】：React - Display new component when form is submittedReact - 提交表单时显示新组件
【发布时间】：2020-04-27 17:18:45
【问题描述】：

有人能告诉我为什么在提交表单时 SearchResult 没有显示吗？

export default class Search extends React.Component {
    constructor() {
        super();
        this.state = {
            search: ""
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({
            search: event.target.value
        });
      }
    handleSubmit() {
       return <SearchResult/>
    }

    render() {
        return(
        <div>
        <form onSubmit={this.handleSubmit}>
            <label>
            Name:
            <input type="text" value={this.state.search} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" />
        </form>
        </div>
        );
    }
}

我没有出现任何错误，当我提交它时，页面只是重新加载并停留在 Search 组件上，而不是 SearchResult 组件上。

谢谢

【问题讨论】：

标签： javascript reactjs components

【解决方案1】：

在 React 中，您可以创建不同的组件来封装您需要的行为。然后，您可以只渲染其中的一部分，具体取决于您的应用程序的状态。

所以，首先添加一个新的状态属性，例如：

this.state = { search: "", isSubmitted: false };

然后更新handleSubmit()方法如：

handleSubmit() {
   this.setState({isSubmitted: true});
}

然后最后更新render()函数如：

render() {

    const isSubmitted = this.state.isSubmitted;

    let content;
    if (isSubmitted) {
      content = <SearchResult/>;
    } else {
      content = (
        <form onSubmit={this.handleSubmit}>
            <label>
            Name:
            <input type="text" value={this.state.search} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" />
        </form>
      );
    }

    return <div>{content}</div>;
}

更多信息：

Conditional Rendering In React

【讨论】：

【解决方案2】：

提交表单时，您的组件没有重新渲染，并且您实际上没有在渲染方法本身中返回 SearchResult。

我只需将 showResults 属性添加到您的状态，如果为 true，则显示结果而不是表单。

另外，请务必在您的 handleSubmit 函数中使用 event.preventDefault 防止页面重新加载。

您的代码如下所示：

export default class Search extends React.Component {
    constructor() {
        super();
        this.state = {
            search: "",
            showResults: false
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({
            search: event.target.value
        });
      }
    handleSubmit(e) {
       e.preventDefault()
       this.setState({...this.state, showResults: true});
    }

    render() {
        if(this.state.showResults){
            return <SearchResult />
        }
        else{
            return(
                <div>
                <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.search} onChange=. 
                    {this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
            </div>
            );
        }
    }
}

【讨论】：

【解决方案3】：

您可以在handleSubmit() 函数中设置状态并更改render() 函数以便它根据条件显示组件

export default class Search extends React.Component {
    constructor() {
        super();
        this.state = {
            search: "",
            submitted: false
        }

handleSubmit() {
  this.setState({
   submitted: true
  })
}

render() {
  if(this.state.submitted) {
    return <SearchResult/>
  }

  return(
    <div>
    <form onSubmit={this.handleSubmit}>
   <label>
   Name:
   <input type="text" value={this.state.search} onChange={this.handleChange} />
   </label>
   <input type="submit" value="Submit" />
   </form>
  </div>
  );
    }

【讨论】：