Javascript 反应-提交表单时显示新组件_Javascript_Reactjs_Components

Javascript 反应-提交表单时显示新组件

javascript reactjs

Javascript 反应-提交表单时显示新组件,javascript,reactjs,components,Javascript,Reactjs,Components,有人能告诉我为什么提交表单时搜索结果不显示吗 export default class Search extends React.Component { constructor() { super(); this.state = { search: "" } this.handleChange = this.handleChange.bind(this); this.handleSub

有人能告诉我为什么提交表单时搜索结果不显示吗

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

导出默认类搜索扩展React.Component{
构造函数（）{
超级（）；
此.state={
搜索：“
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
这是我的国家({
搜索：event.target.value
});
}
handleSubmit（）{
返回
}
render（）{
返回(
姓名：
);
}
}

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

谢谢

提交表单时，您的组件不会重新呈现，而且您实际上不会在呈现方法本身中返回搜索结果

我只想向您的状态添加一个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>
            );
        }
    }
}

导出默认类搜索扩展React.Component{
构造函数（）{
超级（）；
此.state={
搜索：“，
显示结果：错误
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
这是我的国家({
搜索：event.target.value
});
}
handleSubmit（e）{
e、 预防默认值（）
this.setState（{…this.state，showResults:true}）；
}
render（）{
if（this.state.showResults）{
返回
}
否则{
返回(
姓名：
);
}
}
}

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

导出默认类搜索扩展React.Component{
构造函数（）{
超级（）；
此.state={
搜索：“，
显示结果：错误
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
这是我的国家({
搜索：event.target.value
});
}
handleSubmit（e）{
e、 预防默认值（）
this.setState（{…this.state，showResults:true}）；
}
render（）{
if（this.state.showResults）{
返回
}
否则{
返回(
姓名：
);
}
}
}

您可以在

handleSubmit（）

函数中设置状态，并更改

render（）

函数，使其根据条件显示组件

导出默认类搜索扩展React.Component{
构造函数（）{
超级（）；
此.state={
搜索：“，
提交：假
}

handleSubmit（）{
这是我的国家({
提交：正确
})
}

render（）{
如果（此.state.submitted）{
返回
}
返回(
姓名：
);
}

您可以在

handleSubmit（）

函数中设置状态，并更改

render（）

函数，使其根据条件显示组件

导出默认类搜索扩展React.Component{
构造函数（）{
超级（）；
此.state={
搜索：“，
提交：假
}

handleSubmit（）{
这是我的国家({
提交：正确
})
}

render（）{
如果（此.state.submitted）{
返回
}
返回(
姓名：
);
}

在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>;
}

render（）{
const isSubmitted=this.state.isSubmitted；
让内容；
如果（提交）{
内容=；
}否则{
内容=(
姓名：
);
}
返回{content}；
}

有关更多信息：

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