[英]React Native - Updating state upon pressing a button
I currently have two buttons (No, Yes)( component imported from native-base package) that when pressed should update the state with either 0 or 1 respectively and also toggle between true or false to notify if this field has been filled (by default, neither of the two will be pressed, hence set to false). 我目前有两个按钮(否,是)(从本机基础包导入的组件),当按下时应分别将状态更新为0或1,并在true或false之间切换以通知此字段是否已填充(默认情况下) ,则两者均不会被按下,因此设为false)。
I have a handleOnClick() function bound to the "No" button with a debugger to test if I actually do hit it, but once inside this function, I'm not sure how to grab any info for associated components (ie the "No" text within the Text component) so I can perform logic to check if "No" or "Yes" was pressed. 我有一个用调试器绑定到“否”按钮的handleOnClick()函数,以测试是否确实击中了它,但是一旦进入该函数,我不确定如何获取关联组件的任何信息(即“否” “文本”组件中的“文本”),因此我可以执行逻辑检查是否按下了“否”或“是”。
If this was done in pure React, I know I can access certain data attributes that I add to DOM elements or traverse the DOM, but I'm not sure how to do this in React Native or if I'm able to add custom props to a built in component that I can then access. 如果这是在纯React中完成的,我知道我可以访问添加到DOM元素或遍历DOM的某些数据属性,但是我不确定如何在React Native中做到这一点,或者我是否能够添加自定义道具到一个我可以访问的内置组件。
class Toggle extends Component {
constructor() {
super()
this.state = {
selectedOption: '',
isFilled: false
}
this.checkField = this.checkField.bind(this)
this.handleOnClick = this.handleOnClick.bind(this)
}
checkField() {
console.log(this)
// debugger
}
handleOnClick(ev) {
debugger
console.log("I was pressed")
}
render() {
const options = this.props.inputInfo.options //=> [0,1]
const optionLabels = this.props.inputInfo.options_labels_en //=>["No","Yes"]
return (
<View style={{flexDirection: 'row'}}>
<View style={styles.row} >
<Button light full onPress={this.handleOnClick}><Text>No</Text></Button>
</View>
<View style={styles.row} >
<Button success full><Text>Yes</Text></Button>
</View>
</View>
)
}
}
If you want to pass information into function, you can pass it when it is called. 如果要将信息传递给函数,则可以在调用它时传递信息。 In your case, you can call your function from arrow function, like so:
在您的情况下,可以从箭头函数调用函数,如下所示:
<View style={{flexDirection: 'row'}}>
<View style={styles.row} >
<Button light full onPress={() => this.handleOnClick('No')}>
<Text>No</Text>
</Button>
</View>
<View style={styles.row} >
<Button success full><Text>Yes</Text></Button>
</View>
</View>
And in your function 而在你的职能
handleOnClick(text) {
debugger
console.log(`${text} pressed`)
}
Have you tried: 你有没有尝试过:
render() {
const options = this.props.inputInfo.options //=> [0,1]
const optionLabels = this.props.inputInfo.options_labels_en //=>["No","Yes"]
return (
<View style={{flexDirection: 'row'}}>
<View style={styles.row} >
<Button light full onPress={() => this.handleOnClick('No')}><Text>No</Text></Button>
</View>
<View style={styles.row} >
<Button success full onPress={() => this.handleOnClick('Yes')}><Text>Yes</Text></Button>
</View>
</View>
)
} }
and 和
handleOnClick(word) {
this.setState({ selectedOption: word, isFilled: true })
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.