Javascript 反应：基于单击渲染组件

我目前设置了一个输入字段，这样当按下按钮时，输入值将被控制台记录，我正在尝试呈现一个组件，而不是这个console.log

我可以让它正常工作，但每次我键入一个字符时它都会重新渲染，因为我不确定如何检查render方法中的单击，我阅读了一些文档，但不知道如何处理它。我怎样才能做到这一点

这是密码

class Form extends React.Component {
   constructor(props) {
    super(props)

    this.state = {
        input: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
   }

   handleChange(e) {
         this.setState({input: e.target.value});
   }

   handleSubmit(e) {
        e.preventDefault();
        console.log(this.state.input)
   }

   render() {
     //Not sure how to check for this
    if (this.state.input) {
        return <Fetch username={this.state.input} />
    }

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

类表单扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
输入：“”
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
this.setState（{input:e.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
console.log（this.state.input）
}
render（）{
//不知道如何检查这个
if（this.state.input）{
返回
}
返回(
姓名：
);
}
}

如果您需要更多信息，请告诉我。谢谢

---

编辑：顺便说一下，我希望能够多次提交表格，对不起，我应该更详细地描述我的问题。我希望表单组件保持渲染状态，我希望获取组件在单击时渲染

解决方案取决于您的需要，可能会有很多。最简单的方法，仅用于演示：

类表单扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
输入：“”，
提交：false，//添加标志
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
this.setState（{input:e.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
this.setState（{submitted:true}）；//设置提交时的标志
console.log（this.state.input）
}
render（）{
//不知道如何检查这个
if（this.state.submitted）{//通过标志显示组件
返回
}
返回(
姓名：
);
}
}

显然，在实际应用中，它的逻辑太简单了。你必须首先定义你想要达到的目标

更新：

如果要同时保留输入字段和组件，可以这样做：

类表单扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
输入：“”，
提交：false，//添加标志
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
this.setState（{input:e.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
this.setState（{submitted:true}）；//设置提交时的标志
console.log（this.state.input）
}
render（）{
返回(
姓名：
{this.state.submitted&&(
)}
);
}
}

实际上，每次用户键入字符时，您都会显示Fetch组件，并将输入值传递给props

用这个和handleChange方法

if (this.state.input) {
        return <Fetch username={this.state.input} />
    }

然后在你的手上，只需这样做：

handleSubmit(e) {
        this.setState({ fetchIsVisible: true }),;
        e.preventDefault();
   }

显示fetch组件的条件是使用这个新状态而不是输入状态

if (this.state.fetchIsVisible) {
        return <Fetch username={this.state.input} />
    }

if（this.state.fetchIsVisible）{
返回
}

您可以添加是否在状态中提交表单的状态，并在呈现组件时检查表单

如果要检查表单是否已提交且输入不为空，可以使用

（this.state.submitted&&this.state.input）

类表单扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
输入：“”，
提交：假
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
this.setState（{input:e.target.value}）；
}
handleSubmit（e）{
这是我的国家({
提交：正确
});
}
render（）{
//不知道如何检查这个
如果（此.state.submitted）{
返回
获取组件
输入：{this.state.input}
}
返回(
姓名：
输入：{this.state.input}
);
}
}
ReactDOM.render（，document.getElementById（'app'））

您要做的是在用户单击提交按钮时显示提取组件，对吗？是的，这正是我想要做的。谢谢，这对于一次提交非常有效。但是，是的，我应该更详细地描述我的用例。我希望能够多次提交表格。顺便说一句，这是一个github API查找，所以我试图在单击时显示配置文件信息，我希望表单组件在加载配置文件后保持呈现状态。我刚刚返回表单并从呈现中的条件中获取组件，它可以按照我的要求工作！不知道您可以从返回一个组件本身！我猜在你尝试之前永远不会知道。再次感谢您的帮助。每次单击按钮时，它都会不断呈现新的获取组件。当我提交第二次等时，如何删除旧的？我只需要渲染一个Fetch组件。有没有像unmount（）之类的简单清理方法？你看到我的更新了吗？它只呈现一个

Fetch

组件，其中包含来自状态的

username

。这非常有效，

if (this.state.fetchIsVisible) {
        return <Fetch username={this.state.input} />
    }