javascript - 在 React 中按下按钮时重新渲染组件
问题描述
我现在正在创建一个简单的 React 组件。基本上,用户可以输入一个 ID,当他们提交时,它会显示容器中的一些信息。代码看起来像这样
export default class IDContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
Id: '',
isSubmitted: false
};
}
handleSubmit = (event) => {
this.setState({
isSubmitted: true
});
};
handleChange = (event) => {
this.setState({
Id: event.target.value
});
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Input type={'text'} placeholder={"Enter Id"} value={this.state.Id} onChange={this.handleChange} />
<Button type={'submit'} > Lookup </Button>
</div>
<div>
{this.state.isSubmitted && <DetailsContainer Id={this.state.Id} />}
</div>
</form>
);
}
}
details 容器已经创建,只返回有关已传入 Id 的一些详细信息。我可以很好地显示我传入的第一个 Id 的详细信息。但是,当我输入另一个 Id 并提交表单时,DetailsContainer 不会重新呈现,并且仍在显示旧 Id 的详细信息。我尝试移动它并添加一些逻辑(我什至将 DetailsContainer 置于我的状态以查看是否可以那样操作它),但这似乎不起作用。我看到有一个shouldComponentUpdate()
方法,这似乎是我需要使用的,但是我看到的指南都将它放在DetailsContainer中。无论如何让我将它放在 IDContainer 中,还是有更简单的方法来重新渲染 DetailsContainer?
解决方案
我认为这里的部分问题是一旦isSubmitted
设置,您对输入所做的每项更改都将应用于this.state.Id
并传递到DetailsContainer
.
我认为您最好使用一个变量来跟踪输入状态,并使用一个变量来跟踪要传递的 Id DetailsContainer
。
state = { Id: null, inputId: '' };
handleSubmit = (event) => {
this.setState({
Id: this.state.inputId
});
};
handleChange = (event) => {
this.setState({
inputId: event.target.value
});
};
render() {
return (
...
<Input ... value={this.state.inputId} />
...
{this.state.Id !== null ? <DetailsContainer Id={this.state.Id} /> : null}
);
}
推荐阅读
- json - 在多个级别下使用powershell如何删除json中的属性
- c# - 如何为文本文件创建标题并使用 httpClient 上传?
- python - 如何限制用户仅将文件保存在 qfildialog 中的给定文件夹路径中,并阻止他在其他位置浏览?
- sql - 如何在雪花中同时运行查询
- php - PHP不将数据库打印为表
- c# - 在 VSTO 插件中访问 Globals.ThisAddIn.Application 时出现异常
- asp.net-mvc - 如何以最快的方式获取数据到视图模型
- java - Java同步函数在回调时解锁
- linux - Google Cloud VM 上的主目录和 /usr/local 的文件系统和配额
- java - 无法在 IntelliJ IDEA 上运行测试