Question

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

我有一个handleOnClick（）函数绑定到＆＃34; No＆＃34;带有调试器的按钮，用于测试我是否确实按下了它，但是一旦进入此功能，我就不知道如何获取相关组件的任何信息（即文本组件中的＆＃34; No＆＃34;文本所以我可以执行逻辑来检查＆＃34;否＆＃34;或＆＃34;是＆＃34;被压了。

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

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

Answer 2

你试过了吗？

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

}

和

  handleOnClick(word) {
    this.setState({ selectedOption: word, isFilled: true })
  }

React Native - 按下按钮后更新状态

2 个答案: