[英]Rendering views based on change of TextInput in react native
I'm trying to display list of events based on the search query dynamically.我正在尝试根据搜索查询动态显示事件列表。
The problem is that I'm always on the initial View and the renderSearch View is never called.问题是我总是在初始视图上,并且从未调用过 renderSearch 视图。 PastEvent is a function called from the primary redner of the class by scenemap Please check comments in the code.
PastEvent 是一个 function,由 scenemap 从 class 的主要 redner 调用请检查代码中的注释。
//to display the past events tab
PastEvents = () => {
const state = this.state;
let myTableData = [];
if (
state.PastEventList.length !== 0
) {
state.PastEventList.map((rowData) =>
myTableData.push([
this.renderRow(rowData)
])
);
}
function renderPast() {
console.log("im in render past") //shows
return (
<ScrollView horizontal={false}>
<Table style={styles.table}>
{myTableData.map((rowData, index) => (
<Row
key={index}
data={rowData}
style={styles.row}
textStyle={styles.rowText}
widthArr={state.widthArr}
/>
))}
</Table>
</ScrollView>
)
}
function renderSearch() {
console.log("im in render search") //never shows even after changing the text
let searchTable = [];
if (
this.state.seacrhPastList.length !== 0
) {
state.seacrhPastList.map((rowData) =>
searchTable.push([
this.renderRow(rowData)
])
);
}
return (
<ScrollView horizontal={false}>
<Table style={styles.table}>
{searchTable.map((rowData, index) => (
<Row
key={index}
data={rowData}
style={styles.row}
textStyle={styles.rowText}
widthArr={state.widthArr}
/>
))}
</Table>
</ScrollView>
)
}
return (
<View style={styles.container}>
<TextInput placeholder="Search for Events" onChangeText={text => this.onChangeSearch(text)}></TextInput>
{this.state.searching ? renderSearch() : renderPast()} //please check the onchangeSearch function
</View>
)
}
And the function of change is like that:而变化的function是这样的:
onChangeSearch = (text) => {
if (text.length > 0) {
let jsonData = {};
//get list of events
let url = "/api/FindEvents/" + text.toLowerCase()
ApiHelper.createApiRequest(url, jsonData, true).then(res => {
if (res.status == 200) {
this.state.seacrhPastList = res.data
this.state.searching= true //I was hoping this change will cause the render
}
})
.catch(err => {
console.log(err);
return err;
});
}
}
How can i change the events based on the query of the input?我如何根据输入的查询更改事件? Thank you
谢谢
you need to use useState here你需要在这里使用 useState
declare useState like this:像这样声明 useState :
PastEvents = () => {
const [searching, setText] = useState(false);
change the searching state here:在此处更改搜索 state:
if (res.status == 200) {
this.state.seacrhPastList = res.data
setText(true);
}
Hope this helps!希望这可以帮助!
You're in a stateless component you shouldn't use "this" in any way, also you can't use state that way, you need to use react hooks你在一个无状态的组件中,你不应该以任何方式使用“this”,你也不能那样使用 state,你需要使用 react hooks
Import { useState } from 'react'
Then you can use state in a functional component然后你可以在功能组件中使用 state
const [state, setState] = useState(initialvalue);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.