Блог

Главная - Вопросы по программированию - Получает значение из компонента B в компоненте A в react-native

Получает значение из компонента B в компоненте A в react-native

#reactjs #react-native

#reactjs #react-native

Вопрос:

У меня есть компонент для выпадающего списка (имя: JDrop) :

 import React, { Component } from 'react';
import { View,Picker,Image } from 'react-native';

export default class JDrop extends Component {
  constructor(props,state) {
    super(props)
    this.state = {
      selectedValue:'',
    }
  }

  render() {
    const {items,sizeW,bColor} = this.props;
    return (
      <View style={{flexDirection: 'row',height: 35, width: sizeW, alignItems: 'center',backgroundColor:bColor}}>
        <View>
          <Image style={{width:20,height:10, margin:5}} source={require('../../assets/Images/arrowb.png')}/>
        </View>
        <View >
          <Picker 
              mode='dropdown'
              style={{height: 35, width: sizeW,backgroundColor:bColor}}
              selectedValue={this.state.selectedValue}
              onValueChange={(itemValue, itemIndex) => this.setState({selectedValue: itemValue})}
              prompt='Select...'
              >
                {
                   items.map( (item,ind) => (
                    <Picker.Item label={item.name} value={item.value} key={ind} />
                  ))
              }

              </Picker>
        </View>
    </View>
    )
  }
}

Я использую его в App.js как :

 <JDrop items={this.state.priority} sizeW={200} bColor={'blue'} ></JDrop>

как я могу получить выбранное значение из JDrop в App.js ?

Комментарии:

1. у вас опубликован только один компонент JDrop . Итак, что вы подразумеваете под component B и component A ?

2. означает доступ к sth из JDrop в App.js

3. Я думаю, что способ реагирования заключался бы в создании метода в App.js и передает его свойству, которое вы вызываете в своем компоненте JDrop при его изменении: <JDrop items={this.state.priority} onChange={this.itemChanged.bind(this)}> (или аналогичном). Возможно, вы могли бы также передать объект свойству и изменить значение для этого объекта, но на самом деле это не способ react.

Ответ №1:

Есть несколько способов, но самый простой — передать обработчик изменений от родительского элемента дочернему элементу, который может передавать изменения в дочернем элементе. Вот так:

 class App extends React.Component {

   onChangeJDrop = (val) => {
       console.log(val)   
   }

   render() {
       return (
          <JDrop onChange={this.onChangeJDrop} items={this.state.priority} sizeW={200} bColor={'blue'} ></JDrop>
      )
   }
}


class JDrop extends React.Component {

   onValueChange = (itemValue, itemIndex) => {
       this.setState({selectedValue: itemValue})
       this.props.onChange(itemValue)
   }

   render() {
         return (
            <Picker onValueChange={this.onValueChange} />
         )
   }
}

Ответ №2:

Вам нужно будет передать обратный вызов в ваш компонент JDrop (названный onSelect ниже):

 <JDrop onSelect={this.onSelect} items={this.state.priority} sizeW={200} bColor={'blue'} ></JDrop>

Затем в вашем компоненте JDrop:

 onValueChange={(itemValue, itemIndex) => {
  this.setState({selectedValue: itemValue})
  this.props.onSelect(itemValue)
} }