module.exports= class APP extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      key1:'key1',
      key2:'key2'
    };
  render() {
    return (
       <View>
          <Button
             onPress={this.goToTisch}>
             1
          </Button>
          <Button
             onPress={this.goToTisch}>
             2
          </Button>
       </View>
    );
  }
}

Acabo de escribir una aplicación con react-native y no sé cómo actualizar el estado primario desde el elemento secundario. gracias de antemano

11
user6094105 13 ene. 2017 a las 18:29

6 respuestas

La mejor respuesta

Para llamar al método Parent desde child, puede pasar la referencia de esta manera.

Clase para padres

<ChildClass
    onRef={ref => (this.parentReference = ref)}
    parentReference = {this.parentMethod.bind(this)}
/>

parentMethod(data) {

}

Clase infantil

let data = {
    id: 'xyz',
    name: 'zzz',
};

// Esto llamará al método de la madre

this.props.parentReference(data);
9
Muzammil 8 ago. 2018 a las 07:29
class Parent extends Component{
   constructor(props){
   super(props);
    this.state={value:''};
    this.getData=this.getData.bind(this);
  }

  getData(val){
   console.log(val);
  this.setState({
    value:val
  });
  }
    render(){
      const {value}=this.state
    return(
      <View>
      <Screen sendData={this.getData}/>
      <View>
        <Text>
    {this.state.value};
    </Text>
      </View>
      </View>
    )
    }
}
export default Parent;


CHILD CLASS:

class Child extends Component{
   componentWillMount(){
    this.props.sendData('data');
   }
    render(){ 
    return(
        <View>  
       </View>
    )
    }  
}
export default Child;
-1
Krzysztof Janiszewski 5 oct. 2018 a las 11:52

Usando accesorios como este:

Padre:

<Parent>
  <Child onChange={this.change} />
</Parent>

Niño:

<button onclick={this.props.onChange('It Changed')} />

Con esto puedes hacer lo que quieras con tus padres.

2
damianfabian 13 ene. 2017 a las 15:36

Debe pasar de la función de devolución de llamada de padre a hijo y luego llamarla en el hijo.

Por ejemplo:

class Parent extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      show: false
    };
  }
  updateState = () => {
      this.setState({
          show: !this.state.show
      });
  }
  render() {
    return (
        <Child updateState={this.updateState} />
    );
  }
}

class Child extends React.Component {
  handleClick = () => {
      this.props.updateState();
  }
  render() {
    return (
        <button onClick={this.handleClick}>Test</button>
    );
  }
}
19
Piotr Białek 13 ene. 2017 a las 15:37

Esto se puede lograr de dos maneras:

Componente principal:

//Needs argument
const addGoalHandler = goalTitle => {
        // code for updating state
}

<GoalInput onAddGoal={this.addGoalHandler} />

Componente secundario:

Forma 1: Usando Vanilla Javascript

<Button 
    title="ADD"
    onPress={props.onAddGoal.bind(this, enteredGoal)}
/>

Camino 2: Usando la función de flecha

<Button 
    title="ADD"
    onPress={() => { props.onAddGoal(enteredGoal) } }
/>
1
Sahil Shikalgar 20 oct. 2019 a las 06:12

Como lo hace con React.

Debe intercambiar información a través de accesorios, o use una biblioteca como Redux.

4
zurfyx 13 ene. 2017 a las 15:32