React Native - ボタンを押すと状態が更新される

Question

現在、2つのボタン（No、Yes）（コンポーネントはネイティブベースのパッケージからインポートされています）を押すと、状態が0または1のいずれかで更新され、このフィールドが満たされている場合に通知するにはfalseを返します（デフォルトでは、どちらも押されずfalseに設定されます）。

私は実際にヒットしたかどうかをテストするデバッガで「いいえ」ボタンにバインドされたhandleOnClick（）関数を持っていますが、この関数内では関連するコンポーネントの情報を取得する方法がわかりませんTextコンポーネント内の「No」というテキスト）、「No」または「Yes」が押されたかどうかを確認するロジックを実行できます。

これが純粋な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> 
    ) 
    } 
} 

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