reactjs - 在 React 中选择下拉值后页面刷新
问题描述
我有以下反应组件:
class RenderChart extends Component {
constructor(props){
super(props);
this.selectValue=this.selectValue.bind(this);
this.selectValueYear1=this.selectValueYear1.bind(this)
this.state={
isLoaded:false,
items_y1: [],
items_y2: [],
items_y12: [],
arr_keys:[],
arr_vals:[],
selectValue2:"",
selectVal:"",
data:[],
}
}
selectValueYear1(e){
this.setState({
selectVal:e.value
})
}
selectValue (e) {
var selectVal=this.state.selectVal;
fetch("http://127.0.0.1:8000/api/values/"+selectVal+"/"+e.value)
.then(response => response.json())
.then(json => {
this.setState({
items_y1:json.commontopics,
isLoaded:true
})
});
};
render() {
var {isLoaded,desc,selectValue2,selectVal,items_y1} = this.state;
const data = [
{
value: "2011",
label: "2011"
},
{
value: "2012",
label: "2012"
},
{
value: "2013",
label: "2013"
},
{
value: "2014",
label: "2014"
},
{
value: "2015",
label: "2015"
},
{
value: "2016",
label: "2016"
},
{
value: "2017",
label: "2017"
},
{
value: "2018",
label: "2018"
},
{
value: "2019",
label: "2019"
},
{
value: "2020",
label: "2020"
}
];
if(isLoaded){
return (
<>
<br></br>
<React.Fragment>
<Row>
<Col>
<Label>Select an Year</Label>
<Select placeholder="Select Option" options={data} value={data.find(obj => obj.value === selectVal)}
onChange={this.selectValueYear1}
/>
</Col>
<Col>
<Label>Select an Year</Label>
<Select placeholder="Select Option" options={data} value={data.find(obj => obj.value === selectValue2)}
onChange={this.selectValue}/>
</Col>
</Row>
<br></br>
<br></br>
<Row>
{console.log("items",items_y1)}
<img src={`data:image/png;base64,${items_y1}`}></img>
</Row>
</React.Fragment>
</>
);
}
else{
return (
<>
<Row>
<Col>
<Label>Select an Year</Label>
<Select placeholder="Select Option" options={data} value={data.find(obj => obj.value === selectVal)}
onChange={this.selectValueYear1}
/>
</Col>
<Col>
<Label>Select an Year</Label>
<Select placeholder="Select Option" options={data} value={data.find(obj => obj.value === selectValue2)}
onChange={this.selectValue}/>
</Col>
</Row>
</>
)
}
}
}
export default RenderChart ;
我有两个下拉列表可以从中选择值。当我从第二个下拉列表中选择一个值时,会呈现图像并刷新页面。我不明白为什么要刷新页面。此外,这是另一个组件中的一个组件。并且有许多其他子组件
解决方案
尝试在您的函数中添加 e.preventDefault()
selectValue (e) {
e.preventDefault()
var selectVal=this.state.selectVal;
fetch("http://127.0.0.1:8000/api/values/"+selectVal+"/"+e.value)
.then(response => response.json())
.then(json => {
this.setState({
items_y1:json.commontopics,
isLoaded:true
})
});
};
推荐阅读
- twilio - 如何在经过验证的电话号码之间发起 2 向 SMS 对话
- python - 如何使用 Pillow 在 Python 中模糊图像
- html - GLTFLoader 无法导入模块外
- javascript - 通过 Java 调用 JavaScript
- laravel - 上传图片并在 laravel “未定义变量:数据”中出错
- 3d - 计算平面的所有离散点
- javascript - 传递日期范围以单独输入
- c# - 将 int.MaxValue 分配给变量时,编译时没有溢出错误
- python - 我似乎无法弄清楚它一直给我错误的这段代码。我正在尝试打印以显示我的姓名年龄和圆圈面积
- msbuild - “__built-in-schema.yml (Line: 2012, Col: 24): Expected a mapping” 在 V2-V3 管道转换后