React-提交表单后显示新组件

Question

有人可以告诉我为什么提交表单时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组件上。

谢谢

Answer 1

提交表单后，您的组件未重新呈现，而您实际上并未在render方法本身中返回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>
            );
        }
    }
}

Answer 2

您可以在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>
  );
    }

Answer 3

在React中，您可以创建不同的组件来封装所需的行为。然后，您只能根据应用程序的状态来渲染其中的一些。

因此，首先添加一个新的state属性，如：

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