javascript - React Native - 按下按钮时更新状态

Question

我目前有两个按钮(否，是)(从 native 基础包导入的组件)，按下时应分别用 0 或 1 更新状态，并在 true 或 false 之间切换以通知该字段是否已填充(默认情况下，两者都不会被按下，因此设置为 false)。

我有一个handleOnClick()函数绑定(bind)到带有调试器的“否”按钮，以测试我是否真的点击了它，但是一旦进入这个函数，我不知道如何获取关联组件的任何信息(即文本组件中的“否”文本)，这样我就可以执行逻辑来检查是否按下了“否”或"is"。

如果这是在纯 React 中完成的，我知道我可以访问添加到 DOM 元素或遍历 DOM 的某些数据属性，但我不确定如何在 React Native 中执行此操作，或者我是否能够将自定义 Prop 添加到我可以访问的内置组件中。

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>
    )
  }
}

Answer 1

如果你想向函数传递信息，可以在调用时传递。在您的情况下，您可以从箭头函数调用您的函数，如下所示:

      <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>

在你的函数中

  handleOnClick(text) {
    debugger
    console.log(`${text} pressed`)
  }