如何在 react-native 中在子级和父级之间传递数据

Question

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

我只是用 react-native 编写了一个应用程序，不知道如何从子元素更新父状态。 提前谢谢你

Answer 1

您需要从父回调函数传递到子回调函数，然后在子回调函数中调用它。

例如：

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

Answer 2

要从孩子调用 Parent 的方法，可以像这样传递引用。

父类

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

儿童班

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

这将调用父的方法

this.props.parentReference(data);

Answer 3

就像你对 React 所做的那样。

你必须通过道具交换信息，或者使用像Redux这样的库。

Answer 4

使用这样的道具：

父母：

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

孩子：

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

有了这个，你可以在你的父母身上做任何你想做的事情。

Answer 5

这可以通过两种方式实现：

父组件：

//Needs argument
const addGoalHandler = goalTitle => {
        // code for updating state
}
<GoalInput onAddGoal={this.addGoalHandler} />

子组件：

方式1：使用香草Javascript

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

方式2：使用箭头功能

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

Answer 6

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;